Cómo usar: Contrast Checker
- Enter the text color and the background color (HEX, rgb(), hsl(), oklch() or a CSS name), or use the color 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 color to apply it, then copy the new HEX into your CSS.
What is a color contrast ratio?
The contrast ratio compares the relative luminance of two colors 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 color-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 linearized (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 color 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 color, generate a full tint and shade scale with the Color Converter and test pairs here. In Webflow, the Designer’s Vision preview simulates color-vision deficiencies, but it doesn’t show a ratio — check the exact numbers here before you publish.
También se busca como: color contrast checker, wcag contrast, contrast ratio, accessibility, a11y, aa aaa, apca, color accessibility.
Herramientas que combinan con: Contrast Checker
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- 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.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.