TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.
Back

Contrast Checker

Check color contrast for accessibility.

Foreground (Text)

%
%

Pasting an 8 digit HEX like #00000080 moves its alpha here. The background stays opaque.

Background

%

Contrast Ratio

21.00:1

Preview

Large Text

Normal text sample.

WCAG Compliance

AA Normal
Normal text (< 18pt, except ≥ 14pt bold)
Pass
AA Large
Large text (≥ 18pt, or ≥ 14pt bold)
Pass
AAA Normal
Normal text (< 18pt, except ≥ 14pt bold)
Pass
AAA Large
Large text (≥ 18pt, or ≥ 14pt bold)
Pass
UI Components
Graphical objects
Pass

APCA Lc Value

A newer perceptual contrast method. It isn't part of any WCAG standard, so the WCAG 2.2 levels above are still the test for conformance.

Lc 106.0Dark text on a light background
Lc 90 Preferred body text
Columns of body text, 18px light or 14px normal and up
Reached
Lc 75 Minimum body text
Columns of body text, 18px normal or 14px bold and up
Reached
Lc 60 Minimum fluent text
Other text people read, 24px normal or 16px bold and up
Reached
Lc 45 Minimum large text
Headlines, 36px normal or 24px bold and up
Reached
Lc 30 Minimum any text
Placeholder and disabled text, non-content text only
Reached
Lc 15 Invisibility point
Dividers and thick focus outlines, certain non-text only
Reached

A negative Lc means light text on a dark background. Unlike the WCAG ratio, Lc changes when you swap the colors, so check again after a swap. Why APCA

Suggested Colors

Find the closest color that reaches a contrast target.

Target

Meets AA Normal and AAA Large.

Change

The background stays as it is.

This pair reaches 4.5:1. Nothing to change.

Suggestions keep the OKLCH hue and change the lightness, with less chroma only where sRGB runs out. Closest means the smallest OKLab distance from your color. One passing pair doesn't make a page accessible, so check every place these colors meet.

How to use this tool

  1. Enter the foreground color

    Type a hex code (like #1F2937) into the foreground field or use the color picker. This is the color of your text, icon, or UI element.

  2. Enter the background color

    Type a hex code into the background field or use the picker. This is the surface the foreground sits on. Swapping the two keeps the WCAG ratio the same but changes the APCA Lc value, so check light and dark themes as separate pairs.

  3. Read the contrast ratio

    The calculator returns the exact WCAG 2.2 contrast ratio (like 4.52:1 or 7.1:1) computed from the sRGB luminance of both colors. The live preview pane shows how the pairing actually looks on screen.

  4. Check AA and AAA compliance

    The result shows pass/fail for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). If a tier fails, pick that target under Suggested Colors and apply the nearest text or background color that passes.

  5. Compare with the APCA Lc value

    Under the WCAG results, the APCA Lc value gives a second opinion on readability. A minus sign means light text on a dark background. It isn't part of any WCAG standard, so it never changes the pass or fail result. APCA suggests Lc 75 as the minimum for body text and Lc 60 for other text people read.

About this tool

The Contrast Checker calculates the WCAG 2.2 contrast ratio between two colors and shows whether the pairing passes at AA, AAA, or neither. Paste a foreground and background hex value (or use the pickers) to get the exact ratio, like 4.52:1 or 7.1:1, plus a pass/fail for normal text and large text at both levels. A live preview shows how the combination looks, so you're not judging by the number alone.

Use it whenever you pick text colors, link styles, button backgrounds, or error messages. Mid-gray text on white is easy to misjudge by eye, and the checker gives you a measured ratio you can cite in an accessibility audit or legal review.

WCAG thresholds

AA requires 4.5:1 for body text and 3:1 for large text (18pt+, or 14pt+ bold). AAA requires 7:1 and 4.5:1 respectively. Non-text UI (icons, borders, focus rings that carry meaning) needs 3:1 against its adjacent background under SC 1.4.11.

APCA Lc value

Below the WCAG results, the checker also shows an APCA Lc value. APCA is a newer contrast method that weighs the text color and the background color differently, so it can flag light text on a dark background that passes the WCAG 2 ratio and is still hard to read. A minus sign means light text on dark, and the score changes when you swap the colors. It isn't part of any WCAG standard, so treat it as a second opinion. WCAG 2.2 decides pass or fail. APCA suggests Lc 75 as the minimum for body text, Lc 60 for other text people read and Lc 45 for large headlines.

Suggested colors

When a pair fails, the Suggested Colors card finds the nearest text or background color that reaches 3:1, 4.5:1 or 7:1. It keeps the OKLCH hue and moves only the lightness, so a brand blue stays blue. Where sRGB can't show that hue at the new lightness, the color gets less vivid, and the card tells you. Each suggestion is measured with the same formula as the main ratio, see-through text included, and Apply changes only the color you picked. Undo puts the old one back.

When to use it

Run every text and button color through it before shipping, especially for brand-heavy palettes where muted tints on tinted backgrounds can slip under AA. Pair with the Color Picker to dial in the exact hue or lightness adjustment needed to cross the threshold without changing the brand feel.

Popular contrast scenarios

Pre-computed contrast ratios and accessibility guidance for the most common WCAG questions.

WCAG AA for normal text
4.5:1 ratio, the common accessibility baseline
View details
WCAG AAA for normal text
7:1 ratio, enhanced contrast standard
View details
Text on background images
Scrim overlays and contrast tips for hero sections
View details

Frequently asked questions

What is a WCAG AA contrast ratio?
WCAG 2.2 AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+, or 14pt+ bold). It's the baseline many regulators and corporate accessibility policies reference.
What's the difference between WCAG AA and AAA?
AAA is stricter: 7:1 for normal text and 4.5:1 for large text. AAA is the enhanced target for content aimed at people with low vision, but it's harder to hit with brand colors. AA is the realistic minimum for general web content.
How do I check the contrast of my brand colors?
Enter the foreground and background hex values. The calculator returns the exact ratio (like 7.1:1) plus a pass/fail for AA normal, AA large, AAA normal, and AAA large. Swapping fg and bg gives the same WCAG ratio, but the APCA Lc value changes, so test your light and dark modes as separate pairs.
Does white text on yellow fail WCAG?
Almost always, yes. #FFFFFF on #FFD700 (gold) has a contrast ratio of about 1.40:1, failing every WCAG tier. You'd need dark text on yellow backgrounds, or a much darker yellow for text on white.
What is contrast ratio and how is it calculated?
Contrast ratio is the ratio of relative luminance between two colors, from 1:1 (identical) to 21:1 (pure black on pure white). It's computed from sRGB luminance with a gamma correction defined in the WCAG 2.2 spec. This is the same formula Chrome DevTools and accessibility audit tools use.
Do I need to pass WCAG for icons and logos?
Icons that convey meaning (status indicators, navigation chevrons) need 3:1 against their background under WCAG 2.2 SC 1.4.11. Decorative icons and brand logos are exempt, but anything the user needs to perceive for the page to function still needs contrast.
What is the APCA Lc value?
It's a second contrast score from APCA, a newer method that isn't part of any WCAG standard. WCAG 2.2 still decides pass or fail, so read Lc as a second opinion. APCA treats the text and the background differently: a minus sign marks light text on a dark background, and swapping the colors changes the score. Gray #767676 on black passes WCAG AA at 4.62:1 but scores only Lc -30, far from the Lc 75 APCA suggests for body text.

Related tools

Color Picker

Pick colors, convert between HEX, RGB, HSL, HSV, OKLCH and CMYK, and find the nearest CSS and Tailwind color.

Use tool

PPI & Retina Calculator

Calculate PPI and Retina distance for your display.

Use tool

Screen Size Visualizer

Compare screen sizes side-by-side to visualize physical dimension differences.

Use tool

JSON Formatter

Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.

Use tool

Use this tool on your own site

Drop the Contrast Ratio Checker into your blog, docs, or CMS with one iframe snippet. Free, no signup. See all embeddable tools