Skip to main content
Colorrow
Accessibility check

WCAG Color Contrast Checker

Compare a foreground and background color, see the exact contrast ratio, and check all four WCAG text thresholds without reducing accessibility to a single badge.

A passing pair is not a compliance certificate.Contrast is one accessibility requirement. An interface still needs appropriate semantics, keyboard access, focus visibility, non-color cues, readable typography, and testing of every real state and surface.

Six-digit HEX, for example #111111. #111111
Six-digit HEX, for example #FFFFFF. #FFFFFF
Results

Contrast results

21.00:1

Foreground #111111 on background #FFFFFF.

AA Normal TextRequires 4.5:1 or higher
PASS
AA Large TextRequires 3:1 or higher
PASS
AAA Normal TextRequires 7:1 or higher
PASS
AAA Large TextRequires 4.5:1 or higher
PASS

PASS/FAIL uses the unrounded calculated ratio. The large displayed ratio is rounded to two decimals for readability.

Realistic previewHeading · body · small text · button · input

Design systems should be easy to read.

Use the same foreground and background pair across realistic text sizes before deciding whether it belongs in a production interface.

Small supporting text can be where marginal contrast choices become most noticeable.

What contrast ratio means

Contrast ratio compares the relative luminance of two colors. A ratio of 1:1 means there is no luminance difference; 21:1 is the maximum for black and white. For solid sRGB colors, this checker uses the WCAG 2.2 relative-luminance formula.

AA and AAA

AA is the commonly targeted WCAG conformance level for text contrast. AAA uses stricter text thresholds, but a page does not become “AAA compliant” just because one color pair passes this test. Conformance is evaluated against all applicable success criteria.

Normal vs. large text

WCAG allows a lower contrast threshold for large text because larger, heavier letterforms are generally easier to perceive. “Large” means at least 18 point (about 24 CSS px) when regular, or at least 14 point (about 18.7 CSS px) when bold.

AA

Normal text: 4.5:1
Large text: 3:1

AAA

Normal text: 7:1
Large text: 4.5:1

Common contrast mistakes

  • Checking a brand color on white, then assuming every component state is covered.
  • Rounding a near-threshold ratio up and treating it as a pass. Threshold comparison should use the unrounded value.
  • Testing body text but forgetting placeholder text, muted labels, links, disabled-looking states, or text over images and gradients.
  • Using color alone to show errors, selection, status, or links. Contrast and non-color cues solve different accessibility needs.
  • Assuming text contrast automatically covers focus indicators, component boundaries, graphics, or other non-text contrast requirements.

Continue the accessibility workflow

Use contrast as one checkpoint in a larger color workflow. These existing Colorrow tools and guides help you test palettes in context and make better accessible-color decisions.

Palette VisualizerPreview palette roles in an interface-like layout. Palette GeneratorAdjust and save color combinations before testing them. Image Color PickerExtract image colors, then test the pairs you intend to use as text and surfaces. WCAG color contrast explainedLearn how ratios and thresholds apply in design work. Build an accessible website palettePlan color roles with accessibility in mind. Common color accessibility mistakesAvoid recurring problems beyond a single contrast result.