Skip to content

Contrast Checker

Check color contrast for WCAG accessibility compliance. AA and AAA levels.

Colors

Contrast Ratio

21.00
: 1

WCAG 2.1 Compliance

Normal Text (under 18pt / 14pt bold)

Level AA
Requires 4.5:1
Level AAA
Requires 7:1

Large Text (18pt+ / 14pt+ bold)

Level AA
Requires 3:1
Level AAA
Requires 4.5:1

Preset Combinations

Live Preview

Heading Text

This is regular paragraph text. Check how readable it is with the current color combination. Good contrast is essential for accessibility.

Smaller text like this needs even better contrast to remain readable. Consider your users who may have visual impairments.

This is a link•Regular text

WCAG Guidelines

Level AA (Minimum): 4.5:1 for normal text, 3:1 for large text. Required for most websites.

Level AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text. Best for maximum accessibility.

Large text: 18pt (24px) or larger, or 14pt (18.67px) bold or larger.

What is a Contrast Checker?

A Contrast Checker calculates the contrast ratio between a foreground color (typically text) and a background color to verify compliance with WCAG accessibility standards. Developers use it to ensure their color combinations meet the 4.5:1 minimum ratio for normal text (AA) or the stricter 7:1 threshold for AAA compliance. It prevents accessibility failures under WCAG 1.4.3 and ensures readability for users with low vision or color blindness.

How to Use This Tool

  1. 1 Enter your foreground (text) color using a hex code, RGB value, or the eyedropper picker to sample directly from your design.
  2. 2 Enter your background color using the same input methods — hex, RGB, or eyedropper — to define the full color pair being tested.
  3. 3 Read the calculated contrast ratio output and check the pass/fail results for normal text (4.5:1 AA, 7:1 AAA) and large text (3:1 AA, 4.5:1 AAA).
  4. 4 Adjust your foreground or background color using the sliders or by editing the color values until all required compliance levels show a passing result.

Common Use Cases

Body Text & Background Validation

Test your primary text color against your page background during CSS design to confirm the 4.5:1 AA minimum is met for fonts under 18px (or under 14px bold).

Color-Only Link Contrast

Validate links that rely solely on color (no underline) by checking a 3:1 ratio against surrounding body text and a 4.5:1 ratio against the page background to avoid WCAG failures.

UI Component & Icon Contrast

Check borders, input field outlines, icons, and other non-text UI elements against their adjacent background, targeting the 3:1 minimum required under WCAG 2.1 for graphical components.

Dark Mode Theme Testing

Re-test all color pairs when building a dark mode variant, since inverting luminance often breaks contrast ratios that passed in the light theme.

Tips & Best Practices

  • → Always declare both `color` and `background-color` explicitly in your CSS rather than relying on browser or inheritance defaults — inherited colors can produce untested combinations that silently fail contrast checks.
  • → Don't rely on your own eyesight to judge readability: the 4.5:1 AA threshold is specifically calibrated to compensate for approximately 20/40 vision loss, so personal comfort is not a reliable accessibility signal.
  • → Test hover, focus, and active states separately — interactive states often use lighter or desaturated colors that drop below the 3:1 or 4.5:1 thresholds even when the default state passes.
  • → Use the large text exception (18px+ or 14px+ bold) deliberately: only apply the relaxed 3:1 AA ratio when your CSS `font-size` and `font-weight` genuinely qualify, not as a workaround for failing color combinations.

Frequently Asked Questions

What is a contrast checker and what does it measure? +

A contrast checker is a tool that computes the contrast ratio between two colors using the WCAG relative luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's. It then evaluates that ratio against WCAG thresholds — 4.5:1 and 7:1 for text — and returns a clear pass or fail for AA and AAA compliance levels.

How do I use a contrast checker tool for my website? +

Input your text (foreground) color and background color as hex or RGB values, or use the eyedropper to sample colors directly. The tool instantly outputs your contrast ratio and indicates whether each WCAG level passes for normal text, large text, and UI components. Adjust colors using the sliders until the target compliance level is met.

Can I use a contrast checker online without installing anything? +

Yes, web-based contrast checkers run entirely in the browser with no installation required — just enter your color values or use the eyedropper. For in-page testing on live sites, browser extensions like WAVE or Chrome DevTools' accessibility panel provide on-page contrast analysis without leaving your workflow.

Is this contrast checker free to use? +

Most web-based contrast checker tools are completely free with no account or subscription required. You simply enter your color pairs and get immediate results, making them practical for quick checks during design and development without any cost barrier.

What contrast ratio do I need to pass WCAG AA and AAA? +

For WCAG AA (the standard legal and compliance baseline), normal text requires a 4.5:1 ratio and large text (18px+ or 14px+ bold) requires 3:1; non-text UI elements also require 3:1. For the stricter AAA level, normal text must reach 7:1 and large text must reach 4.5:1. The maximum achievable ratio is 21:1, which is pure black on pure white.

Ready to launch your website?

Get professional hosting from $2.99/mo with free domain and SSL.

Get Hostinger Try Vercel Free