Web & Publishing · PRACTICAL GUIDE
How text color contrast is calculated
Calculate sRGB luminance and understand text contrast thresholds without mistaking them for a full accessibility audit.
Use the actual foreground and background
A color pair must represent the rendered text and what is immediately behind it. If an image or gradient is involved, a single chosen background value may not describe every part of the text. Sample an image pixel where appropriate, but do not assume one pixel proves the whole design works.
The checker requires opaque colors. Composite transparent layers against their real background before evaluating them.
Linearize before measuring luminance
Normalize each sRGB channel to 0–1. For a channel c at or below 0.04045, use c / 12.92. Otherwise use ((c + 0.055) / 1.055)2.4. Relative luminance is 0.2126R + 0.7152G + 0.0722B using those linearized channels.
The contrast ratio is (lighter luminance + 0.05) / (darker luminance + 0.05). Black and white produce 21:1; equal colors produce 1:1.
Read the correct threshold
AA normal text requires 4.5:1 and AA large text 3:1. AAA normal text requires 7:1 and AAA large text 4.5:1. Large text means at least 18 points regular or 14 points bold—24 CSS pixels or approximately 18.67 CSS pixels bold.
Do not round before evaluating a threshold. A ratio of 4.499 can display as 4.50 but still fail the 4.5 requirement. The tool uses the unrounded calculation for its result.
Apply the result in context
Check the real font size and weight, then inspect keyboard focus, errors and non-text controls separately. Passing a text color pair does not certify page accessibility, typography or readability.
Use the W3C contrast explanation for the criterion and exceptions. Use Color converter when your editor requires a different notation; all these conversions remain in sRGB rather than a print CMYK workflow.
Put it into practice
Choose the tool that matches your next step. Keep an original copy and inspect the result before using it elsewhere.
Color contrast checkerCheck a foreground/background text pair.Web & PublishingHEX RGB HSL converterTranslate a design color into another notation.Web & PublishingImage color pickerSample usable colors from artwork.Images