TechCompare LogoTechCompare
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

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. Reversing fg and bg gives the same ratio, so you can test both light-on-dark and dark-on-light in one pass.

  3. Read the contrast ratio

    The calculator returns the exact WCAG 2.1 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 any tier fails, adjust the foreground or background lightness until it passes.

About this tool

The Contrast Checker calculates the WCAG 2.1 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.

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.1 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. Both directions are checked. Reversing fg/bg gives the same ratio, which is useful for testing both light and dark modes.
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.1 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.1 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.

Related tools

Color Picker

Pick colors and convert between HEX, RGB, HSL, CMYK, and HSV formats.

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