ToolPremier Logo
ToolPremier

Home  ›  Color Tools  ›  Color Contrast Checker

Color Contrast Checker

Check whether your foreground and background color pair meets WCAG 2.1 accessibility contrast requirements. Instantly see your contrast ratio with clear AA and AAA pass/fail results.
✓ Free✓ No signup✓ Privacy first✓ Runs in your browser
Color Contrast Checker - ToolPremier
Live Preview
Large Text (Bold 20px)
Normal Text (Regular 15px). Accessibility ensures everyone can read content easily without straining.

Color Contrast Checker · WCAG 2.1 compliance check · Live preview · client-side only

How it works

Check contrast in three steps

1. Enter your two colors

Input HEX or RGB values for your foreground (text) color and your background color. A live text preview updates to show how the combination looks at real scale.

2. View the contrast ratio

The tool calculates the WCAG contrast ratio between the two colors using the relative luminance formula defined in the WCAG 2.1 specification.

3. Check your compliance level

Results display clear PASS or FAIL indicators for WCAG Level AA (minimum standard) and Level AAA (enhanced standard) at both normal text and large text sizes.

FAQ

Common questions

WCAG stands for Web Content Accessibility Guidelines, published by the World Wide Web Consortium (W3C). Contrast ratio requirements exist to ensure text is readable by people with low vision, colour vision deficiency, or those viewing screens in bright environments. Under WCAG 2.1, the minimum contrast ratio for normal body text is 4.5:1 at Level AA, and 7:1 at Level AAA (enhanced). Large text — defined as 18pt or larger, or 14pt bold and larger — has a lower threshold of 3:1 for AA compliance.
WCAG Level AA is the standard required by most accessibility legislation worldwide, including the ADA (United States), EN 301 549 (European Union), and the Equality Act (United Kingdom). Level AAA requires a more stringent contrast ratio of 7:1 for normal text and 4.5:1 for large text, and it is recommended where the design permits — particularly for interfaces serving older adults or people with significant visual impairment. AAA is not mandated in most legal frameworks but represents best practice for high-stakes or high-accessibility contexts.
For most web and app interfaces, aim for at least 4.5:1 for body text and interactive UI controls, and at least 3:1 for large headings and graphical elements. If your audience is likely to include older users, people with visual impairments, or anyone accessing your interface outdoors on a mobile screen, higher ratios meaningfully improve the experience. Pure black on white achieves 21:1. Low-contrast combinations below 3:1 create documented readability problems for a significant portion of users regardless of intent.
This tool checks contrast between two flat colors and is intended for text-on-background pairs and UI control elements. It does not analyse photographic images or complex gradient backgrounds. For icons and informational graphical elements, WCAG 1.4.11 (Non-text Contrast) requires a minimum 3:1 ratio against adjacent colors. When placing text over images or gradients, test contrast at the least-contrasting region of the background to ensure text is readable across the full range of background values that may appear behind it.

Keep going

Related tools

Color Palette Generator

Generate palettes and validate each color pair here for accessibility.

Open tool →

Color Picker

Select exact foreground and background colors before running a contrast check.

Open tool →

Color Blindness Simulator

Preview your color pairs under different types of color vision deficiency.

Open tool →

HEX to RGB Converter

Convert your color codes into the format needed for contrast checking.

Open tool →

About the Color Contrast Checker

The Color Contrast Checker validates color pairs against the WCAG 2.1 accessibility standard, providing instant pass/fail results at all four compliance categories: AA normal text, AA large text, AAA normal text, and AAA large text. It is used by web developers, UX designers, and accessibility specialists building interfaces that must meet legal or organisational accessibility requirements. Running a contrast check during the design phase is far less costly than remediating low-contrast choices after development.

Benefits

  • Checks all four WCAG 2.1 compliance levels simultaneously in a single tool
  • Displays the exact numerical contrast ratio so designers understand proximity to each threshold
  • Live text preview shows how the color combination looks before committing to it
  • Instant browser-based results with no file uploads, no data collection, and no account required

Privacy

Color values entered into this tool are processed entirely within your browser; no inputs or results are transmitted to any server or stored in any form.