Color contrast checker
Measures text and control colors on the rendered page against the WCAG 2.2 AA ratios, and flags links that differ from text by color alone.
What this check looks for
The audit runs this check with every other check, on the page as the browser renders it.
- Body text below 4.5:1
- Normal size text whose color is too close to its background.
- Large text below 3:1
- Headings and large text measured against the lower large text ratio.
- Low contrast controls
- Borders of inputs and buttons that are hard to see against the page.
- Links shown by color alone
- Links with no underline that differ from the surrounding text only by color.
What a failure looks like
White text on a light blue booking button measures 2.3:1. WCAG 2.2 AA needs 4.5:1 for text this size.
/* Broken: 2.3:1 */
.btn-booking { background: #8FB4DE; color: #fff; }/* Fixed: 6.3:1 */
.btn-booking { background: #1B5FAA; color: #fff; }How it shows in AccessGuard
Each finding names the WCAG criterion, explains the problem in plain words and shows the element that fails, so a developer can find it on the page.
WCAG criteria
Findings from this check name one of these criteria. How much of each the audit can decide on its own:
| Criterion | Level | Automation |
|---|---|---|
| 1.4.3 Contrast (Minimum) Text on solid backgrounds is measured. Text over images and gradients needs a person. | AA | Partly automated |
| 1.4.11 Non-text Contrast | AA | Partly automated |
| 1.4.1 Use of Color Links that differ from text only by color are flagged. Other meaning carried by color needs a person. | A | Partly automated |
What still needs a person
No automated tool can confirm these. AccessGuard marks related findings as Review, so nobody mistakes them for a pass.
- Text placed over photos, videos or gradients, where the background changes behind the letters.
- Whether information shown with color, such as a red error state, is also shown another way.
- Text inside images and logos (logos are exempt).
Questions
What contrast ratio does WCAG 2.2 AA require?
4.5:1 for normal text and 3:1 for large text, which is at least 24px regular or 18.66px bold. Borders and icons that users need to see need 3:1 against what is next to them.
Does the check use the colors in the CSS or on the page?
It measures the colors the browser actually renders, after stylesheets, inherited colors and transparency are applied.
Why do contrast results sometimes need a person?
When text sits over an image or gradient, the background differs under each letter. AccessGuard marks those cases for review instead of guessing.
Related checks and guides
- Target size checker
Measures buttons, links and icons on the rendered page against the WCAG 2.2 minimum of 24 by 24 pixels.
- Keyboard and focus checker
Finds controls people can't reach by keyboard, focus styles that were removed, and focused elements hidden behind sticky headers.
- Link text checker
Finds links with no accessible name, vague text like "click here", and links that open new windows without warning.
- WCAG Color Contrast: Meeting AA & AAA Without Killing Design
Guide
- Most Common WCAG Violations (With Code Fixes for Each)
Guide
Check a client page for color contrast issues
The free audit runs this check and every other one. Results in about a minute.