Skip to main content

WCAG Color Contrast Checker

Check the contrast ratio of any text and background pair against WCAG AA and AAA, and get accessible color suggestions.

Runs 100% in your browser

Shortcuts
Copy the output
Alt + Shift + C

Your input is saved in this browser only. Reset clears it.

Preview

Sample Text
Contrast Ratio: 0:1

Text Settings

WCAG Compliance

Contrast Ratio:0:1
AA Normal (4.5:1)
AA Large (3:1)
AAA Normal (7:1)
AAA Large (4.5:1)
Fail Compliance for All Text

Color Controls

#333333
#FFFFFF

Generated Code

.element {
  color: #333333;
  background-color: #FFFFFF;
}

How to use the Color Contrast Checker

  1. Enter or pick a text color and a background color.

  2. Read the contrast ratio and the WCAG AA and AAA results for normal and large text.

  3. If the pair fails, apply a suggested color, then copy the values or a link to the result.

Example: Checking a brand blue on white

Text and background
Text:       #3366cc
Background: #ffffff
Result
Contrast ratio: 5.37:1

AA normal text (4.5:1)    Pass
AA large text (3:1)       Pass
AAA normal text (7:1)     Fail
AAA large text (4.5:1)    Pass

The same blue on a dark #111827 background is only 3.31:1, which fails for body text. That's why dark themes usually need a lighter variant of the brand color.

Frequently Asked Questions

What contrast ratio does WCAG require?

For WCAG 2.2 level AA: 4.5:1 for normal text, 3:1 for large text (18.66px bold or 24px and above), and 3:1 for user interface components and meaningful graphics. Level AAA raises the text requirements to 7:1 and 4.5:1.

How is the contrast ratio calculated?

From the relative luminance of the two colors: (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter. Ratios run from 1:1 (identical colors) to 21:1 (black on white). The formula uses luminance rather than hue, which is why two colors can look very different and still fail.

Does contrast apply to disabled buttons and placeholders?

Disabled controls are exempt from the contrast requirement, but placeholder text is not: it's real text and must meet 4.5:1. If a placeholder has to be faint to look like a hint, use a visible label above the field instead.

My brand color fails on white. What now?

Keep the hue and adjust lightness: a few percent darker usually clears 4.5:1 without changing the brand feel. Or keep the color for large text, buttons, and graphics (3:1) and use a darker variant for body copy. Generating a full tint and shade scale makes those variants easy to pick.

About the Color Contrast Checker

The Color Contrast Checker is an essential tool for web designers and developers who want to create accessible websites. It helps ensure that text is readable against its background by measuring the contrast ratio according to Web Content Accessibility Guidelines (WCAG).

How to Create a Website Color Palette in 5 Steps shows how to build contrast checks into a palette from the start instead of fixing failures at the end.

Why Color Contrast Matters

Proper color contrast is crucial for several reasons:

  • Accessibility - Ensures content is readable for people with visual impairments, including color blindness and low vision
  • Legal compliance - Many countries require websites to meet accessibility standards, especially for government and public service sites
  • Improved usability - Better contrast benefits all users, especially in challenging viewing conditions like bright sunlight
  • Professional appearance - Properly contrasted text looks more polished and professional

Understanding WCAG Contrast Requirements

AA Level (Minimum)

  • Normal text: 4.5:1 ratio
  • Large text (18pt+): 3:1 ratio
  • UI components and graphics: 3:1 ratio

AAA Level (Enhanced)

  • Normal text: 7:1 ratio
  • Large text (18pt+): 4.5:1 ratio

How the Contrast Checker Works

  1. Select foreground (text) and background colors using the color pickers
  2. The tool calculates the contrast ratio using the WCAG formula
  3. Results show whether your colors pass AA and AAA standards for different text sizes
  4. If your colors don't meet standards, the tool suggests alternative colors that maintain your design aesthetic while improving accessibility
  5. Preview your text with the selected colors to see how it will look on your website

Tips for Accessible Color Combinations

  • Dark text on light backgrounds (or vice versa) typically provides the best contrast
  • Avoid placing text on busy backgrounds or images without a solid overlay
  • Don't rely solely on color to convey information (use icons, patterns, or text labels as well)
  • Test your design in grayscale to ensure it works for users with color blindness
  • Consider using our Color Palette Generator to create accessible color schemes from the start

Pro Tip

When designing with brand colors that don't meet contrast requirements, consider using those colors for non-text elements like borders or accents, while using more accessible colors for text and critical UI elements.