ContrastKit: WCAG Color Check

Check text and background colours for WCAG contrast and find a readable fix

You picked a colour that looks right, and somewhere between the mockup and the screen it became unreadable. ContrastKit tells you before anyone else notices.

IS IT READABLE?
Enter the text colour and the background — hex or rgb() — and ContrastKit gives you the WCAG contrast ratio and a verdict for each case that matters: body text, large text and headings, and the edges of icons and controls. A live sample shows the real thing, not a swatch.

AND IF NOT, WHAT FIXES IT
A failing pair is only useful if you know what to do about it. ContrastKit finds the nearest shade of the same hue that reaches AA, for the text and for the background, so the design keeps the colour it was built around and the words become legible. Tap to apply, or copy the hex.

CHECK IT FOR EVERYONE
The same pair is redrawn as people with protanopia, deuteranopia, tritanopia and achromatopsia see it, with the ratio recalculated each time. A combination that separates for most people can collapse for some — this is where you find that out.

KEEP THE ONES THAT WORK
Save a pair with a note about where it is used, and the values are waiting the next time that component comes up.

BUILT TO BE QUICK
• Every check runs on your device — the colours you enter are never sent anywhere
• No account, no sign-in
• Available in 17 languages

ContrastKit is free to use, with ads.