Colour · T-01
Colour contrast checker
Choose a text colour and a background. Kleurstaal works out the contrast ratio according to WCAG 2.2, shows how it looks and suggests the nearest colour that does pass.
Your files stay on your device
Questions
Good to know
What ratio do I need?
For normal text at least 4.5 to 1 (AA) and ideally 7 to 1 (AAA). Large text, from 24 pixels or 18.66 pixels bold, can be 3 to 1 (AA) or 4.5 to 1 (AAA). Borders of buttons, fields and icons need at least 3 to 1.
How does Kleurstaal come up with the suggestion?
Kleurstaal keeps the hue and saturation of your colour fixed in OKLCH and only makes it lighter or darker, in small steps, until the ratio is reached. The side with the smallest change wins.
Does Kleurstaal also calculate APCA?
No. APCA is a proposal for the future WCAG 3 and not yet a standard, and the official calculation code has its own licence that isn’t free. Kleurstaal sticks to WCAG 2.2, the standard behind the European accessibility law.
How it works
Colour contrast checker in three steps
Two colours
Type or paste a text colour and a background, in hex, rgb, hsl, oklch or as a name. Or choose them with the colour picker.
Read the verdict
The ratio is shown large at the top; below it you see whether it passes for normal text, large text and buttons.
Take a suggestion
If it fails, Kleurstaal looks for the nearest colour in the same hue that does pass. One click and it’s in the field.