Colour Contrast Checker
Enter a text colour and a background colour to see the contrast ratio, which levels they pass, and a nearby colour that passes if they do not.
Deze inhoud is in het Engels.
Body text sample. The quick brown fox jumps over the lazy dog.
Large text sample
Uitgewerkte voorbeelden
Orange text on white
Text #ff4a1f on background #ffffff
Contrast 3.36:1. Passes for large text only; fails level AA for normal text, which needs 4.5:1.
Large text needs 3:1 at level AA, so this colour can work for big headings but not for body copy.
Grey text on white
Text #767676 on background #ffffff
Contrast 4.54:1. Passes level AA for normal text, but not level AAA, which needs 7:1.
Choose a darker grey if the text is small and must meet the stricter level.
Over Colour Contrast Checker
Colour contrast decides whether text and interface parts can be seen clearly, especially for people with low vision, colour blindness or ageing eyes, and for anyone reading on a bright or dim screen. The WCAG 2.2 guidelines measure contrast as a ratio between the light level of two colours, from 1:1 when there is no difference to 21:1 for black on white. This checker takes a text colour and a background colour, works out the ratio and tells you which levels it meets for normal text, large text and interface parts such as borders, icons and form outlines.
The checker lists each requirement with a pass or fail result. Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text, which is 24px or bigger, or 18.66px and bold, needs 3:1 for AA and 4.5:1 for AAA. Interface parts need 3:1. When a pair falls short, the suggested colour is the nearest one that keeps the same hue and reaches the level you need, so you can make a small adjustment rather than start again. Use the Use this colour button to try the suggestion in the checker.
Zo gebruikt u Colour Contrast Checker
- Enter the text colour with the picker or as a HEX code.
- Enter the background colour the text will sit on.
- Read the contrast ratio and the pass or fail result for each level.
- If a pair fails, use the suggested colour or try a lighter or darker background.
Veelvoorkomend gebruik
- Checking body text and links before a website goes live
- Confirming that button labels stand out against their fill colour
- Testing a brand colour before it is used for small text
- Checking input borders and icons against their backgrounds
Veelgestelde vragen
What is a good contrast ratio for text?
For normal body text, WCAG 2.2 level AA asks for at least 4.5:1, and level AAA asks for at least 7:1. Large text needs 3:1 for AA. Most sites aim for AA as a minimum, and AAA is a stronger target for long reading. The ratio is only one part of readability, so font size, weight, spacing and line length matter too.
What counts as large text?
Large text is text at least 24 CSS pixels tall, or at least 18.66 pixels tall when it is bold. Those sizes are the same as 18 point and 14 point in print. Large text has a lower contrast requirement because bigger letters are easier to read at lower contrast. Anything smaller counts as normal text and needs the higher ratio.
Why are the ratios rounded down?
The ratio is shown rounded down to two decimal places, so a value that falls just short of a target is never shown as passing. Pass and fail results use the exact ratio, so a pair that shows 4.50:1 might still fail if the exact value is slightly lower. Rounding down keeps the displayed number honest against the threshold.
What does the suggested colour do?
The suggestion keeps the hue and saturation of your text colour and moves its lightness until it reaches the target ratio. It picks the closest match to your original colour among those that pass. If no colour with that hue can reach the target on your background, the checker says so, and a lighter or darker background will usually be needed.
Do I need contrast for non-text parts of a page?
Yes. WCAG 2.2 requires a contrast ratio of 3:1 for parts of the interface needed to understand content and operate controls, such as input borders, focus rings, icons and chart segments. Decorative elements that do not carry meaning are exempt. Check the border of a text field against the page background, because a faint border can make a form hard to use.