Pick a colour and read it as HEX, RGB and HSL, then check its contrast against another colour for WCAG text and UI rules.
#17203argb(23, 32, 58)hsl(225, 43%, 16%)Passes every text check, AAA included.
Large text, 24px
The quick brown fox jumps over the lazy dog.
| AA, body text | Pass | needs 4.5:1 |
|---|---|---|
| AA, large text | Pass | needs 3:1 |
| AAA, body text | Pass | needs 7:1 |
| AAA, large text | Pass | needs 4.5:1 |
| Icons and controls | Pass | needs 3:1 |
Runs in your browser; nothing you enter leaves this page.
Type #rgb, #rrggbb, rgb() or hsl() and the other forms update. HSL describes a colour as hue, saturation and lightness, which is the easiest to adjust by hand.
Contrast is the ratio of the lighter colour’s relative luminance to the darker one’s, from 1 to 21. WCAG 2.2 asks for 4.5 for normal text at level AA and 7 at AAA, 3 for large text and for UI components, and 4.5 for large text at AAA.
ratio = (L₁ + 0.05) ÷ (L₂ + 0.05)
CTR CalculatorWork out click-through rate from impressions and clicks, and compare it with the usual rate for the channel.
Marketing ROI CalculatorTurn ad spend, revenue and cost of goods into profit, ROI, ROAS, margin and break-even revenue.
Bounce Rate CalculatorFind the share of sessions that bounced from your session and bounce counts, with the share that stayed.
A/B Test Sample Size CalculatorEstimate how many visitors each variant needs to detect a lift in conversion rate, and how many days that takes.