Color Contrast Checker

check WCAG color contrast ratio for accessibility compliance

By Bikram NathLast updated May 19, 2026

Paste a foreground hex and a background hex to get the WCAG 2.1 relative-luminance contrast ratio between them, with a clear AA/AAA pass-fail result. A practical example: white (#FFFFFF) on a medium-grey (#767676) returns exactly 4.54:1, which passes AA for normal text but fails AAA. Unlike browser DevTools, which only reports contrast for elements already rendered on a page, this tool lets you test hypothetical pairs before writing a single line of CSS.

Try it now — free, instant, no signup

What is Color Contrast Checker?

Color Contrast Checker computes the contrast ratio between any two colors using the WCAG 2.1 relative luminance formula. You enter a foreground color (your text or icon fill) and a background color, and the tool returns a ratio like 7.2:1 alongside a AA/AAA verdict for both normal text (thresholds: 4.5:1 and 7:1) and large text (3:1 and 4.5:1). There is no rendering step — the math runs directly on the hex or RGB values you provide.

When designers already have a mockup open, they often reach for the accessibility panel inside Chrome DevTools or the TPGi Colour Contrast Analyser desktop app, which can eyedropper directly from pixels on screen. This tool is faster when you are working from a token file or Figma spec and just need to verify a named pair like --text-primary on --surface-card before committing it to a design system. WebAIM's Contrast Checker is the closest web equivalent; the main difference is workflow integration — this one lives alongside the other devlab color tools rather than as a standalone site.

One thing that trips up developers: the WCAG 2.1 formula operates in the sRGB color space after gamma expansion, so a color that looks 50% grey visually is not at the midpoint of the luminance scale. #808080 has a relative luminance of about 0.216, not 0.5. This means intuition about which pairs will pass is unreliable without actually running the numbers, especially in the mid-tone ranges where failures are most common.

When to use Color Contrast Checker

✓Verify a proposed text-on-background token pair passes the 4.5:1 AA threshold before it gets merged into a design system.

→Audit a client-supplied brand palette for accessibility compliance before the CSS variables are written.

⚡Confirm that a CTA button label (e.g., white on your brand's teal) clears 3:1 for its large-text classification at 18px bold.

Frequently Asked Questions

My color pair passes AA for large text but fails for normal text — what exactly counts as large?

WCAG 2.1 defines large text as at least 18pt (24px) in regular weight, or at least 14pt (approximately 18.67px) in bold weight. Those thresholds come from the WCAG 2.1 spec itself and apply to rendered text after browser font scaling. A 16px bold label does not qualify. The lower contrast threshold for large text (3:1 vs 4.5:1) was set because bigger letterforms preserve legibility at lower ratios, but the cutoff is stricter than most developers assume. When in doubt, test the pair against the normal-text threshold to be safe.

Why does WCAG 2.1 relative luminance treat the same hex differently depending on gamma?

The formula linearises sRGB values before combining them. Each 8-bit channel (0–255) is divided by 255 to get a value in [0, 1], then gamma-expanded: values above roughly 0.04045 are raised to the power 2.4 after a small offset. That step converts perceptual (display-encoded) values to linear light values. The final luminance is then a weighted sum of the linearised R, G, B channels (0.2126R + 0.7152G + 0.0722B). Skipping the gamma step — which some older contrast tools do — can produce ratios that are off by 10–30%, leading to false passes on mid-tone colours.

Does WCAG 2.1 contrast ratio apply to icons and UI borders, not just text?

Success Criterion 1.4.3 (the AA/AAA text contrast requirements) covers text and images of text only. Non-text elements like icons, input borders, and focus rings fall under SC 1.4.11 (Non-text Contrast), which requires a 3:1 ratio against adjacent colours. This checker computes the same ratio formula for any two colours, so you can use it for icon audits — just keep in mind that the pass threshold you care about is 3:1, not 4.5:1, for those cases. Confusing the two criteria is a common audit mistake.

Can I check semi-transparent or rgba() colors?

The WCAG formula requires the actual rendered colour values, which means transparency must be resolved against the real background before the ratio is meaningful. If you enter a semi-transparent foreground like rgba(0,0,0,0.5) on a white background, you would need to pre-composite those to the effective rendered colour (#808080 in that example) and enter that resolved hex instead. This tool works on fully-opaque colour pairs. If your design uses transparent layers, resolve each layer manually first — alpha compositing formula is: result = alpha * fg + (1 - alpha) * bg, applied per channel.

Is the contrast ratio algorithm here the same one WCAG 3 will use?

No. WCAG 2.1 uses the relative luminance formula described above, which has documented weaknesses for certain hue and polarity combinations — for example, it can under-predict readability issues with blue text on dark backgrounds. The WCAG 3 working draft proposes APCA (Advanced Perceptual Contrast Algorithm), which accounts for text weight, font size, and polarity separately and produces a lightness contrast value rather than a simple ratio. APCA is not yet a formal W3C standard as of 2026. Until WCAG 3 is adopted, legal and procurement requirements will reference WCAG 2.1 thresholds, so this tool's output is what auditors and accessibility overlays check against.

Related Tools

Colors

Color Converter

convert between HEX, RGB, HSL, HSB, and CMYK color formats

Colors

Color Palette Generator

generate harmonious color palettes from a base color

Colors

Color Shades Generator

generate tints and shades of any color for design systems

CSS

CSS Gradient Generator

generate CSS linear, radial, and conic gradients visually