Colour contrast and the WCAG rules
Text that is too close in colour to its background is hard to read for everyone in bright sunlight, and impossible for many people with low vision or colour blindness. The Web Content Accessibility Guidelines (WCAG) turn readable into a number: the contrast ratio between the text colour and the background colour, from 1:1 (identical) to 21:1 (black on white).
This checker computes that ratio for any two HEX colours, tells you which WCAG levels it passes for normal and large text, and shows a live preview of real text in the pair so you can judge it with your own eyes as well.
How to use it
- Enter the text colour as a HEX code, or pick it with the colour picker.
- Enter the background colour the same way.
- Read the ratio and the four pass or fail results: AA and AAA, each for normal and for large text.
- If a check fails, darken the darker colour or lighten the lighter one, and watch the ratio climb.
Example: the grey that just makes it
#767676 on #ffffff #777777 on #ffffff
#767676: 4.54:1, passes AA for normal text #777777: 4.48:1, fails AA for normal text
One step of grey decides the result. #767676 is the lightest neutral grey that passes AA for body text on white, which is why it appears in so many design systems.
The thresholds
Level AA, the target most laws and policies refer to, asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1. Large text means at least 24 CSS pixels, or 18.66 pixels when bold. User interface parts such as input borders and icons that carry meaning need 3:1 against their surroundings under WCAG 2.1.
The ratio has no rounding allowance: 4.49:1 fails AA for normal text. That is why this tool shows two decimals.
How the ratio is calculated
Each colour is converted to its relative luminance: the sRGB channels are linearised, then weighted 21% red, 72% green and 7% blue, because the eye is far more sensitive to green. The ratio is (lighter + 0.05) / (darker + 0.05). The heavy green weight explains why pure blue text on black is barely readable while bright green on black looks strong.
Beyond the number
Passing AA does not guarantee comfortable reading. Thin fonts, small sizes and text over photos all lower legibility. Very high contrast, such as pure white on pure black, can also tire some readers on large dark-mode surfaces; an off-black background often reads better while still passing easily.
Questions
Does the order of the two colours matter?
No. The ratio always divides the lighter colour by the darker one, so swapping text and background gives the same number.
Is WCAG 3 changing this?
WCAG 3 is still a draft and proposes a different contrast method. Laws and procurement rules today refer to WCAG 2.x, which is what this tool checks.
Can I check text over an image or gradient?
Pick the lightest area behind the text as the background for dark text, or the darkest area for light text. If the worst spot passes, the whole text passes.