Color Contrast Checker (WCAG)

WCAG contrast ratio and AA/AAA pass/fail for text and UI colors.

WebRuns in your browser

About this tool

Check the contrast ratio between a text color and a background color against the WCAG 2.x thresholds: 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA.

Large text means at least 18pt, or 14pt bold. User interface components and graphical objects need 3:1. Semi-transparent text colors are blended over the background before measuring.

How to use it

  1. Enter the text color and the background color.
  2. Check them.
  3. Read the ratio and which WCAG levels it passes. Adjust a color and check again until it passes.

Example

Input:

Text #767676 on background #ffffff

Result:

4.54:1, passes AA for normal and large text and for UI components; passes AAA only for large text