How to Check Color Contrast: WCAG 2.2 Ratios, HEX, RGB and HSL Explained
Why white text on a bright blue button can fail, why HSL lightness is misleading and which gray is the lightest you can use on white. We calculated the WCAG 2.2 contrast ratios for common colors.
Text that is hard to read costs readers, and it is one of the most common accessibility problems on websites. The Web Content Accessibility Guidelines (WCAG) define a simple number for it: the contrast ratio between text and background. In this guide we explain the color codes you will meet (HEX, RGB and HSL), how the ratio is calculated and which thresholds apply, and we show calculated examples for colors that are popular on the web. You can check any pair of colors with our color converter and contrast checker: enter the text color, add a background, and it shows the ratio, the WCAG result and the closest color that passes.
HEX, RGB and HSL: three ways to write the same color
Screens mix every color from red, green and blue light. All three common notations describe the same mix:
| Notation | Example | How it works |
|---|---|---|
| HEX | #1D4ED8 | Red, green and blue as two hexadecimal digits each, from 00 to FF (0 to 255). The short form #FC0 stands for #FFCC00. |
| RGB | rgb(29, 78, 216) | The same three values as decimal numbers from 0 to 255. |
| HSL | hsl(224, 76%, 48%) | Hue as an angle on the color wheel (0 = red, 120 = green, 240 = blue), saturation and lightness in percent. |
HEX and RGB are exact; converting to HSL involves rounding, so a color can shift by one step when you convert it back and forth. HSL is popular because it is easy to make a color lighter or darker by changing one number. For contrast, though, its lightness value is misleading, as we will see in a moment.
How the contrast ratio is calculated
WCAG compares the relative luminance of two colors, that is how bright they appear to the human eye. Each channel is first converted from the sRGB curve to linear light, and then the channels are weighted by how sensitive our eyes are to them:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(R, G, B: linearized channel values between 0 and 1)
contrast ratio = (L1 + 0.05) / (L2 + 0.05)
(L1 = lighter color, L2 = darker color)The weights show the key point: green contributes more than ten times as much to perceived brightness as blue. The ratio ranges from 1:1 (the same color twice) to 21:1 (black on white). Since May 2021 the formula uses a threshold of 0.04045 for the sRGB conversion instead of 0.03928; according to the W3C this has no practical effect on the results.
The thresholds in WCAG 2.2
| What | Level AA | Level AAA |
|---|---|---|
| Normal text | at least 4.5:1 | at least 7:1 |
| Large text (at least 18 pt / 24 px, or 14 pt / about 18.7 px bold) | at least 3:1 | at least 4.5:1 |
| Icons, input borders, focus indicators and other important graphics | at least 3:1 | no higher level |
Level AA is the usual target, and the one most laws and procurement rules refer to. In the EU, the European Accessibility Act has applied since June 28, 2025 to many digital products and services, including online shops; the European standard EN 301 549, which is widely used to check accessibility, builds on WCAG.
Why HSL lightness is misleading
In HSL, pure yellow hsl(60, 100%, 50%) and pure blue hsl(240, 100%, 50%) have exactly the same lightness of 50%. On a white background the difference could hardly be bigger:
| Color | HSL lightness | As text on white | As text on black |
|---|---|---|---|
Yellow #FFFF00 | 50% | 1.07:1 | 19.56:1 |
Cyan #00FFFF | 50% | 1.25:1 | 16.75:1 |
Green #00FF00 | 50% | 1.37:1 | 15.30:1 |
Orange #FFA500 | 50% | 1.97:1 | 10.63:1 |
Magenta #FF00FF | 50% | 3.14:1 | 6.70:1 |
Red #FF0000 | 50% | 4.00:1 | 5.25:1 |
Blue #0000FF | 50% | 8.59:1 | 2.44:1 |
All seven colors have the same HSL lightness, yet their contrast against white ranges from 1.07:1 to 8.59:1. Pure red, which many people consider a strong signal color, does not even reach 4.5:1 on white. So never judge contrast by the L value in HSL; calculate it.
Popular colors that fail with white text
White text on a colored button is one of the most common combinations on the web, and often one of the most common failures. We calculated a few typical mid-tone colors:
| Background | White text | Black text | Better choice |
|---|---|---|---|
Bright blue #2196F3 | 3.12:1 | 6.72:1 | black text, or darken to #0B78D0 (4.55:1 with white) |
Green #4CAF50 | 2.78:1 | 7.56:1 | black text |
Orange #FF8800 | 2.39:1 | 8.77:1 | black text |
Red #F44336 | 3.68:1 | 5.70:1 | black text, or a darker red |
Purple #8E24AA | 7.04:1 | 2.98:1 | white text |
White text on these blue, green and orange buttons only passes for large text, if at all. There is a simple rule behind this: for any background with a relative luminance above about 0.18, black text gives more contrast than white text. For most bright, saturated colors that means black text is the more readable choice, even if white looks more familiar.
Gray text: where the limit is
Light gray text is popular for secondary information, captions and form placeholders. On a white background these are the limits:
| Gray | Contrast on white | Result |
|---|---|---|
#595959 | 7.00:1 | lightest gray for AAA |
#767676 | 4.54:1 | lightest gray for AA |
#777777 | 4.48:1 | fails AA by a hair |
#949494 | 3.03:1 | lightest gray for large text and icons |
#A9A9A9 (CSS "darkgray") | 2.35:1 | fails |
#CCCCCC | 1.61:1 | fails |
The same applies to semi-transparent text. Black text at 54% opacity on white looks like #757575 (4.61:1), at 38% opacity like #9E9E9E (2.68:1). What counts is the color the reader finally sees, so calculate transparent colors on the background they appear on.
Step by step: checking your colors
- Collect the actual pairs: body text on the page background, link color, button text on button color, placeholder text in input fields, and text on images or colored boxes.
- Enter the text color in our color converter and the background below it.
- Check the results for normal text, large text and graphics. For body text you need at least 4.5:1.
- If a pair fails, use the suggested closest shade: it keeps the hue and saturation and only changes the lightness, so your design stays recognizable.
- Check dark mode separately. Colors that work on white often fail on a dark background, and the other way round.
WCAG 3 is still a working draft, and how it will measure contrast has not been settled. Until it becomes a standard, WCAG 2.2 and its ratios remain the reference for laws and audits.
Tools used in this guide
Frequently asked questions
What contrast ratio do I need for normal text?
At least 4.5:1 for WCAG level AA, which is the usual target. Level AAA requires 7:1. Large text, from 24 px or from about 18.7 px in bold, needs at least 3:1 for AA.
Why does white text on my blue button fail?
Many bright blues are lighter than they look. White text on #2196F3, for example, only reaches 3.12:1. Darken the blue until the ratio is at least 4.5:1, or use black text, which reaches 6.72:1 on the same blue.
Is HSL lightness the same as brightness?
No. HSL lightness ignores how differently our eyes react to red, green and blue. Pure yellow and pure blue both have 50% lightness in HSL, but yellow has a contrast of 1.07:1 on white and blue 8.59:1.
Do logos and icons need a certain contrast?
Logos and brand names are exempt. Icons that carry meaning, input field borders and focus indicators need at least 3:1 against the colors next to them under WCAG 2.2 success criterion 1.4.11.
Does the contrast check send my colors anywhere?
No. Our color converter and contrast checker run entirely in your browser. Nothing you enter is uploaded.
Is 4.49:1 good enough?
No. The threshold is a minimum, and the value is not rounded: 4.49:1 fails the 4.5:1 requirement. Choose a slightly darker or lighter shade until the ratio is at least 4.5:1.
Sources and further reading
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation of 12 December 2024 (www.w3.org)
- W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum) (www.w3.org)
- W3C: Relative luminance (definition and formula) (www.w3.org)
- Directive (EU) 2019/882 – European Accessibility Act (eur-lex.europa.eu)