Color Contrast Checker (WCAG)

WCAG 2.1 AA requires 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1. UI components need >= 3:1.

sRGB is gamma-corrected to linear, then relative luminance = 0.2126R + 0.7152G + 0.0722B. Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter.

Accessible Perceptual Contrast Algorithm (for WCAG 3) — accounts for text weight, polarity, and spatial frequency. Shown as reference; WCAG 2 ratios remain the normative standard today.

Yes, the Color Contrast Checker (WCAG) is 100% free with no registration, no hidden fees, and no usage limits. All processing happens locally in your browser, ensuring complete privacy.

Absolutely. The Color Contrast Checker (WCAG) processes everything client-side in your browser. No data is uploaded to or stored on any server. Your content remains private on your device at all times.

Yes, the Color Contrast Checker (WCAG) is fully responsive and works on smartphones and tablets. You can use it on any device with a modern web browser -- no app download required.

No account or registration is needed. Simply open the Color Contrast Checker (WCAG) in your browser and start using it immediately. There are no sign-up walls or usage restrictions.

The Color Contrast Checker (WCAG) supports a wide range of popular formats and languages. Check the tool interface for the full list of supported options.

Simply enter your input in the provided field, adjust any settings to your preference, and the tool will process it instantly. You can then copy the result to your clipboard or download it.

The Color Contrast Checker (WCAG) works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For the best experience, use the latest version of your preferred browser.

Under WCAG 2.1, large text is anything 18pt and above, or 14pt and above when bold. Because design tools work in pixels, that translates to roughly 24px regular or about 18.66px (commonly rounded to 18.5px or 19px) bold. Large text only needs a 3:1 contrast ratio for AA and 4.5:1 for AAA, while normal body text needs the stricter 4.5:1 and 7:1. The reasoning is simple: bigger, heavier letterforms have thicker strokes, so they stay legible at lower contrast. This distinction matters because a heading color that passes at 24px can fail outright in 16px body copy. This checker reports the ratio against every threshold at once, so you can see whether your pair clears the normal-text bar or only qualifies as large text.

It comes down to which WCAG threshold applies to each font size. A heading rendered at 24px or larger (or 18.66px bold) is treated as large text and only needs a 3:1 ratio, while body copy below that size is normal text and must reach 4.5:1. So a foreground and background that produce, say, a 3.5:1 ratio will earn a Pass badge for the heading but a clear Fail for the paragraph using the identical colors. The ratio itself never changes with font size, only the bar it has to clear. That is why a color scheme can look approved in your hero section yet quietly fail in captions and labels. This tool renders both 16px and 24px samples in the Preview tab and lists every threshold, so you immediately see where a pair holds up and where it breaks.

You usually only need to nudge the lightness of one color rather than rebuild your palette. The fastest path is to darken the text or lighten the background (or vice versa) in small steps until the ratio crosses 4.5:1, keeping the original hue intact so the brand feel survives. This checker has dedicated Darken and Lighten buttons that shift a color's lightness incrementally while preserving its hue, and the ratio updates live so you can stop the moment a Pass appears. A Swap button flips foreground and background to test the inverse pairing, which sometimes passes when the original does not. If you would rather start fresh, the Random accessible pair button generates a combination that already clears 4.5:1, giving you a compliant baseline to adjust from.

Yes. You can type a 3- or 6-digit HEX value, set individual RGB channels from 0 to 255, adjust HSL hue, saturation, and lightness, or use the native color picker, and all four representations update together automatically. Changing any one input recalculates the others, so a tweak to a single RGB channel is instantly reflected in the HEX and HSL fields and in the live contrast ratio. This matters because design specs and code arrive in mixed formats: a brand guide might list HEX, a CSS file might use rgb(), and a design tool might expose HSL sliders. Keeping them synchronized means no manual conversion or copy-paste errors. When a pair works, the Copy as CSS vars button hands you a ready-to-paste :root block with foreground and background custom properties for your stylesheet.

No, they follow a separate, lower threshold. WCAG 2.1 Success Criterion 1.4.11, Non-text Contrast, requires only 3:1 contrast for user interface components and meaningful graphics, including input borders, icons, toggle states, and focus indicators, measured against their adjacent colors. That is the same bar as large text, not the 4.5:1 required for normal text. The idea is that a button outline or an icon does not need to be as crisp as a paragraph to remain perceivable, but it still must be distinguishable. A common failure is a pale gray input border that disappears against a white form. This checker lists the UI components and graphics threshold alongside the text levels and renders a button and a bordered card in the Preview tab, so you can confirm interactive elements are visible, not just the words.