Text that does not stand out enough from its background is hard to read for everyone, and impossible for many people with low vision or colour-vision deficiencies. The Web Content Accessibility Guidelines (WCAG) measure this with the contrast ratio – a number from 1:1 (identical colours) to 21:1 (black on white) based on the relative luminance of the two colours, that is, how bright each one looks to the eye.
WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text (at least 18 pt, or 14 pt bold) and for icons and form borders. Level AAA raises the bar to 7:1 and 4.5:1. Many laws and procurement rules, including the European Accessibility Act and US Section 508, point to these levels.
Relative luminance weighs green much more than blue, because our eyes are most sensitive to it: pure blue (#0000FF) on black is only 2.4:1 while pure green (#00FF00) on black reaches 15.3:1. This calculator converts any colour model to sRGB, applies the WCAG formula and shows how the pair looks with large, normal and small text.
How to use the Contrast Ratio Calculator
- I know
- Colour model
- Text (foreground) colour
- Background colour
- Red – text colour
- Green – text colour
- Blue – text colour
- Hue (°) – text colour
- Saturation (%) – text colour
- Lightness (%) – text colour
- Hue (°) – text colour
- Saturation (%) – text colour
- Value (%) – text colour
- Cyan (%) – text colour
- Magenta (%) – text colour
- Yellow (%) – text colour
- Black (%) – text colour
- Red – background
- Green – background
- Blue – background
- Hue (°) – background
- Saturation (%) – background
- Lightness (%) – background
- Hue (°) – background
- Saturation (%) – background
- Value (%) – background
- Cyan (%) – background
- Magenta (%) – background
- Yellow (%) – background
- Black (%) – background
- Relative luminance of the first colour (0–1)
- Relative luminance of the second colour (0–1)
- Text size
Everything is calculated in your browser, so results appear instantly and nothing you type is sent to a server.
How it works
Each colour is converted to sRGB, every channel is linearised and weighted to give its relative luminance, and the lighter luminance plus 0.05 is divided by the darker luminance plus 0.05. The ratio is compared with the WCAG thresholds for the chosen text size.
Worked example
Grey text #767676 on a white background. Each channel is 118/255 = 0.4627, which linearises to ((0.4627 + 0.055)/1.055)^2.4 = 0.1812, so the grey’s luminance is 0.1812 (all three channels are equal). White has luminance 1.
Contrast ratio = (1 + 0.05) ÷ (0.1812 + 0.05) = 1.05 ÷ 0.2312 = 4.54:1. That passes AA for normal and large text and fails AAA for normal text (7:1 needed).
Contrast of common pairs
| Text on background | Ratio | WCAG AA normal text |
|---|---|---|
| #000000 on #FFFFFF | 21:1 | Pass |
| #595959 on #FFFFFF | 7.00:1 | Pass (AAA) |
| #767676 on #FFFFFF | 4.54:1 | Pass |
| #FFFFFF on #0000FF | 8.59:1 | Pass |
| #FFFFFF on #FF0000 | 4.00:1 | Fail |
| #FFFF00 on #FFFFFF | 1.07:1 | Fail |
Formula
Linear channel = c/12.92 if c ≤ 0.04045, else ((c + 0.055)/1.055)^2.4 · L = 0.2126 R + 0.7152 G + 0.0722 B · Contrast ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)
Worked example
Inputs — I know: The colour codes; Colour model: HEX; Text (foreground) colour: #767676; Background colour: #FFFFFF; Text size: Normal text (below 18 pt, or below 14 pt bold).
Results — Contrast ratio = 4.54:1; Result for your text size = Meets WCAG AA (not AAA) for normal text; WCAG AA – normal text (4.5:1) = Pass; WCAG AA – large text (3:1) = Pass; WCAG AAA – normal text (7:1) = Fail; WCAG AAA – large text (4.5:1) = Pass.
Key terms
- Relative luminance
- The brightness of a colour relative to white, from 0 (black) to 1 (white), after linearising sRGB.
- Contrast ratio
- (L1 + 0.05) ÷ (L2 + 0.05), from 1:1 to 21:1.
- WCAG
- Web Content Accessibility Guidelines published by the W3C.
- AA / AAA
- The middle and highest WCAG conformance levels.
Frequently asked questions
What contrast ratio is required for accessibility?
WCAG 2 AA requires 4.5:1 for normal text and 3:1 for large text and UI components. AAA requires 7:1 and 4.5:1.
What is the contrast ratio of grey #767676 on white?
4.54:1 – the lightest neutral grey that passes AA for normal text on white.
What counts as large text?
At least 18 pt (24 px) regular or 14 pt (about 18.7 px) bold.
Does it matter which colour is text and which is background?
No. The ratio uses the lighter and darker luminance, so swapping them gives the same result.
What is the highest possible contrast ratio?
21:1, black (#000000) on white (#FFFFFF).
Do logos need to meet contrast rules?
No – WCAG exempts logotypes and purely decorative text, but meeting them is still good practice.
Is WCAG 3 contrast (APCA) different?
Yes – the draft APCA method scores polarity and font weight differently. WCAG 2.x ratios remain the legal standard today.