Color Contrast Checker: a practical guide

When this is useful

Readable text depends partly on the difference between foreground and background luminance. The WCAG 2.x contrast ratio offers a useful quantitative check for solid colors. It is one part of accessibility and should be combined with readable typography, keyboard access, clear labels, and testing.

A reliable workflow

Enter the foreground and background colors. The tool linearizes sRGB channel values, calculates relative luminance, and divides the lighter value plus 0.05 by the darker value plus 0.05. It compares the unrounded result with AA and AAA thresholds while displaying the ratio to two decimal places.

Example input: #20231e

What to check before you finish

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 and 4.5:1 respectively; large means at least 18 pt regular or 14 pt bold. Non-text contrast has a 3:1 threshold where applicable. This solid-color check does not account for transparency, gradient backgrounds, images, anti-aliasing, or full conformance.

Keep the next step simple

Open the Color Contrast Checker above to try the workflow. Your input is processed in your browser, without an account or file uploads. The related tools below can help with the next step; check the output before publishing it or adding it to a production system.