How to use the Contrast Checker
- Enter the text colour and the background colour (HEX, rgb(), hsl(), oklch() or a CSS name), or use the colour pickers.
- Read the contrast ratio and the AA/AAA results for normal text, large text and UI components.
- Check the live preview — headings, body copy, small print, a button and an input border.
- If a level fails, click Use next to the nearest passing colour to apply it, then copy the new HEX into your CSS.
What is a colour contrast ratio?
The contrast ratio compares the relative luminance of two colours on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) use it to decide whether text is readable for people with low vision or colour-vision deficiencies — and for anyone reading a phone in bright light. It is also a legal benchmark: accessibility laws such as the European Accessibility Act and the ADA are commonly assessed against WCAG 2.x level AA.
WCAG 2.2 contrast requirements
| Criterion | Level | Normal text | Large text |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | 3:1 for UI component boundaries, focus indicators and meaningful icons/graphics | |
Large text means at least 18 pt (24 px) regular or 14 pt (≈18.66 px) bold. Logos, purely decorative text and the text of disabled controls are exempt.
How the ratio is calculated
Each sRGB channel is linearised (values ≤ 0.04045 are divided by 12.92, others use ((c + 0.055) / 1.055)2.4), then combined into relative luminance: L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (Llighter + 0.05) / (Ldarker + 0.05). Thresholds are strict: #777777 on white is 4.47:1 and fails AA, while #767676 reaches 4.54:1 and passes. That’s why this checker truncates rather than rounds the displayed ratio. Semi-transparent text is first blended onto the background, exactly as the browser would paint it.
What is APCA?
The Accessible Perceptual Contrast Algorithm (APCA) is the candidate contrast method for the future WCAG 3. It reports a lightness contrast value Lc from roughly 0 to 106 (negative for light text on dark backgrounds) and accounts for polarity — light-on-dark and dark-on-light are not perceived equally. As a guide, Lc 90 is preferred for body text, Lc 75 is the minimum for body text and Lc 60 for other content text. APCA is still a draft, so meet WCAG 2.x for compliance today and use APCA as a second opinion, especially for dark themes.
Fixing a failing pair
The suggestions table finds the closest colour that passes by changing only the HSL lightness of either the text or the background, so your brand hue survives. For darker or lighter variants of a brand colour, generate a full tint and shade scale with the Color Converter and test pairs here. In Webflow, the Designer’s Vision preview simulates colour-vision deficiencies, but it doesn’t show a ratio — check the exact numbers here before you publish.
Tools that pair well with the Contrast Checker
- CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
- Image Alt Checker — Audit every image on a page in one table: alt text status, file size, width/height attributes, format and lazy loading — with filters and CSV export.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Variables to Tailwind — Turn your :root colour variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.