Good color has a readable side.

A nice pairing still needs to be readable.

A palette can feel cohesive and still contain combinations that are difficult to read. Contrast is one practical way to evaluate a foreground/background pair before that problem reaches the page.

The WCAG contrast ratio compares the relative luminance of two colors. It is not a measure of whether the colors look harmonious, nor a score for the whole design.

Know which threshold you are checking.

For Level AA, normal text needs a contrast ratio of at least 4.5:1. Large text needs at least 3:1. For Level AAA, those thresholds are 7:1 and 4.5:1 respectively.

In this context, large text means at least 18 points, or at least 14 points when bold. In typical CSS terms, that is about 24 pixels, or 18.7 pixels bold. A small, thin label does not qualify as large text merely because it uses capital letters.

Check the actual pair.

Enter the intended text color and the background directly behind it in the contrast checker. Check every meaningful state: a button, a hover state and a muted caption may all use different pairs.

The checker assumes two opaque, solid sRGB colors. Text over a photograph or gradient can pass in one region and fail in another. Those cases need a different kind of inspection.

Change luminance, not just hue.

When a pair falls below the threshold, try making the foreground darker or the background lighter. Changing red to blue while keeping a similar luminance may not create enough contrast.

It is often easier to maintain a small set of deliberate text/background combinations than to allow every palette color to be used for every role. A decorative accent does not have to become a body-text color.

A passing result is one piece of the work.

Contrast does not assess keyboard behavior, focus visibility, labels, headings, text alternatives or the order in which content is read. Text can also be difficult to use because of size, spacing or rendering even when a color calculation passes.

Use a contrast ratio as a concrete check, not a certification. Build the rest of the interface with the same care.

Primary references

W3C: Understanding contrast minimum and Understanding enhanced contrast.