Useful Hacks

Contrast Checker

Check WCAG contrast ratio between two colors.

Calculated locally in your browser.

Overview

Calculates the WCAG contrast ratio between a text color and background color, and checks it against the AA and AAA accessibility thresholds for normal and large text.

How to use it

  1. 1Choose a text color and background color.
  2. 2View the contrast ratio and which WCAG levels it passes.

Formula

Contrast ratio

(L1 + 0.05) / (L2 + 0.05)

L1 and L2 are the relative luminance of the lighter and darker colors.

Tips

  • AA is the baseline most sites should meet: 4.5:1 for normal text, 3:1 for large text (18pt+, or 14pt+ bold).

Related tools

All design tools

Search tools

Search for any tool by name, category or keyword