Documentation-based practice example; check the controls in your installed Oxygen version.
What the checker measures
The Color Contrast Checker compares the relative luminance of two solid, opaque sRGB colors. It calculates (lighter luminance + 0.05) / (darker luminance + 0.05). A ratio measures the color pair; it does not assess every accessibility requirement.
Worked example: verify the reading colors
- Enter
#f7f7f3as text and#111415as background. - The tested checker reports approximately 17.232:1, passing the displayed normal/large AA and AAA text thresholds.
- Compare a boundary case: black and white returns 21:1, while white on white returns 1:1 and fails those thresholds.
- Test your secondary text color too; checking only the main heading misses other reading content.
Use the correct text threshold
| Text category | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Large text is at least 18pt, approximately 24 CSS pixels, or 14pt bold, approximately 18.67 CSS pixels. Use the actual text styling to select the threshold. The checker makes pass/fail decisions from the full ratio rather than its rounded display.
Check the real background and states
Compare the computed foreground with the background directly behind the text. Repeat for hover, disabled and focus states where relevant. For text on images, gradients or translucent layers, this two-color tool is not sufficient; inspect the composited result and the worst background area behind the text.
Placeholders and small helper text can be difficult to read even when a large heading passes. Keep visible labels so an input’s meaning does not disappear after typing.
Troubleshooting
- Invalid input: use a three- or six-digit hex color such as
#fffor#111415. This tool does not accept CSS color names or alpha values. - A displayed value seems to pass but the result fails: the decision uses the unrounded ratio; do not round a near-threshold value up.
- The screenshot still looks hard to read: inspect font size, weight, line length and the real background, not only the ratio.
- You changed one color: repeat the check for adjacent text and interaction states affected by the change.
Reference and next checks
Reference: W3C understanding text contrast. Continue with keyboard operation, focus visibility, meaningful labels and text resizing. A successful color check is one verified part of the page, not a claim of complete accessibility.