How to Check Colour 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 grey is the lightest you can use on white. We calculated the WCAG 2.2 contrast ratios for common colours.
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 colour codes you will meet (HEX, RGB and HSL), how the ratio is calculated and which thresholds apply, and we show calculated examples for colours that are popular on the web. You can check any pair of colours with our colour converter and contrast checker: enter the text colour, add a background, and it shows the ratio, the WCAG result and the closest colour that passes.
HEX, RGB and HSL: three ways to write the same colour
Screens mix every colour 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 colour wheel (0 = red, 120 = green, 240 = blue), saturation and lightness in percent. |
HEX and RGB are exact; converting to HSL involves rounding, so a colour can shift by one step when you convert it back and forth. HSL is popular because it is easy to make a colour 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 colours, 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 colour, L2 = darker colour)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 colour 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 28 June 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:
| Colour | 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 colours 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 colour, does not even reach 4.5:1 on white. So never judge contrast by the L value in HSL; calculate it.
Popular colours that fail with white text
White text on a coloured 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 colours:
| 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 colours that means black text is the more readable choice, even if white looks more familiar.
Grey text: where the limit is
Light grey text is popular for secondary information, captions and form placeholders. On a white background these are the limits:
| Grey | Contrast on white | Result |
|---|---|---|
#595959 | 7.00:1 | lightest grey for AAA |
#767676 | 4.54:1 | lightest grey for AA |
#777777 | 4.48:1 | fails AA by a hair |
#949494 | 3.03:1 | lightest grey 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 colour the reader finally sees, so calculate transparent colours on the background they appear on.
Step by step: checking your colours
- Collect the actual pairs: body text on the page background, link colour, button text on button colour, placeholder text in input fields, and text on images or coloured boxes.
- Enter the text colour in our colour 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 recognisable.
- Check dark mode separately. Colours 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 colours next to them under WCAG 2.2 success criterion 1.4.11.
Does the contrast check send my colours anywhere?
No. Our colour 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)