Vitali Web Tools
Vitali Web Tools
Collapse sidebar
Tool library
Favorites

Colour Contrast Checker

Check text and background colours against WCAG 2.2 contrast thresholds. See a live preview and copy the CSS colours.

Processed on your deviceFree · No account needed

Preparing your tool…

How to use it

  1. Enter foreground and background HEX values.
  2. Check the live preview and AA/AAA outcomes.
  3. Swap or adjust colours, then copy the CSS.

Example: #777777 on white is below 4.5:1 even though a rounded display may suggest 4.5.

Details & limits

Two solid opaque sRGB colours in 3- or 6-digit HEX. AA/AAA text thresholds; no transparency, gradient or full accessibility audit.

What counts as large text?

At least 18 pt, or 14 pt bold. The tool does not inspect an entire website or evaluate transparent colours, gradients and images.

Check the colour pair before publishing

A colour pair can look attractive but still make small text difficult to read. This checker calculates relative luminance from opaque sRGB HEX values and compares the unrounded ratio with WCAG 2.2 text thresholds. The preview helps you assess the actual combination, but typeface, size and surrounding content still matter. A passing colour pair is only one part of an accessible page.

Related tools

Pick Colours from an ImageWebsite, DNS & TLS CheckWatermark Images