Inspectors

Color Contrast Checker (WCAG)

Enter a foreground (text) color and a background color to check if the contrast ratio meets WCAG accessibility standards. The tool shows the contrast ratio (1:1 to 21:1) and whether it passes AA and AAA levels for normal text, large text, and UI components. This is essential for ensuring your designs are accessible to users with visual impairments.

Color Contrast Checker (WCAG) — Check text/background contrast against WCAG AA and AAA

What it does

  • ▸Computes the contrast ratio between two colors (1:1 to 21:1)
  • ▸Checks WCAG AA compliance (4.5:1 for normal text, 3:1 for large text)
  • ▸Checks WCAG AAA compliance (7:1 for normal text, 4.5:1 for large text)
  • ▸Checks non-text UI component contrast (3:1 minimum)
  • ▸Shows a live preview of the text on the background color
  • ▸Accepts hex, RGB, HSL, and named CSS color inputs

Use cases

  • ▸Verifying that text on a colored background meets accessibility standards
  • ▸Checking if a button color combination is WCAG compliant
  • ▸Testing color choices for a brand palette before implementation
  • ▸Auditing an existing design for accessibility compliance

How it works

1

Enter the foreground (text) color in any format (hex, RGB, HSL, named)

2

Enter the background color in any format

3

The tool computes the contrast ratio and checks WCAG levels

4

Review the pass/fail status for AA and AAA across text sizes

Frequently asked questions

1What's the difference between AA and AAA?

AA is the standard compliance level required by most accessibility regulations (ADA, Section 508). It requires 4.5:1 contrast for normal text. AAA is the enhanced level requiring 7:1 for normal text. AAA is not required for most applications but is recommended for maximum accessibility.

2What counts as 'large text'?

WCAG defines large text as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Large text has lower contrast requirements because larger text is easier to read at lower contrast.

3How is the contrast ratio calculated?

The tool converts both colors to relative luminance values (using the WCAG formula that accounts for sRGB gamma encoding) and computes the ratio (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result ranges from 1:1 (same color) to 21:1 (black on white).

Related tools

Color Blindness Simulator — Simulate how a color appears with protanopia, deuteranopia and tritanopia

Color Blindness Simulator

Simulate how a color appears with protanopia, deuteranopia and tritanopia

Color Converter — Convert colors between hex, RGB, HSL, HSV, HWB, CMYK, UIColor and named formats

Color Converter

Convert colors between hex, RGB, HSL, HSV, HWB, CMYK, UIColor and named formats

Color Palette Generator — Generate color palettes and harmonies — complementary, analogous, triadic, tetradic, split-complement, monochromatic

Color Palette Generator

Generate color palettes and harmonies — complementary, analogous, triadic, tetradic, split-complement, monochromatic

Color Contrast Checker (WCAG) — Check text/background contrast against WCAG AA and AAA

Color Contrast Checker (WCAG)

Check text/background contrast against WCAG AA and AAA

Use Color Contrast Checker (WCAG) offline in Devinity

All 95 tools run locally on your Mac. No internet required, no data sent to servers.

Download Devinity →