Pick a text colour and a background colour. You get the contrast ratio, a live preview, and a clear pass or fail for each WCAG level, plus the closest text colour that would pass.
Try an example:
Pyalm designs and builds fast, accessible websites and web apps for businesses in India and the UAE. Use this free checker on your own designs, and talk to us when you want them built properly.
WCAG contrast ratio runs from 1:1 (identical colours) to 21:1 (black on white). Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and for interface components such as input borders and icons. Level AAA raises those to 7:1 and 4.5:1. Low-contrast text is the single most common accessibility failure on the web.
When the pair fails AA, the tool nudges the text colour's lightness, keeping its hue and saturation, until it passes — so a failing brand grey becomes a slightly darker brand grey. Consider the fix for body text first; large headings and decorative elements have more latitude. Note that contrast also matters for disabled and placeholder text, which are easy to overlook.
📖 Read the full guide: WCAG Colour Contrast Guide: AA vs AAA Ratios
Convert between HEX, RGB, HSL, HSV, CMYK and OKLCH — and check WCAG contrast.
Generate harmonious colour palettes, lock the ones you like, extract colours from an image and export as CSS or Tailwind.
Design layered CSS box shadows visually and copy the CSS or Tailwind class.
Create a complete favicon set from an image, text or emoji — ICO, PNGs, manifest and HTML.
WCAG exempts logotypes and purely decorative text, and inactive controls. Everything that carries information still needs sufficient contrast.
HEX (#2F6F4F or #2f6), rgb(), hsl() and CSS colour names.
No. It is one of many requirements — keyboard access, alt text, focus states and semantic structure matter just as much.