A Practical Color Accessibility Review Checklist
Record text, boundaries, focus and color-only meaning separately, with a worked form example and evidence you can hand to a reviewer.
Updated : Rechecked technical claims, replaced unsupported generalizations, and added reproducible examples and source links.
Use this checklist to record a color review of one real screen. It covers color-related checks, not every WCAG requirement. Record the URL, component, state, foreground, background, font size and result. A passing swatch says little about an error message that disappears on focus.
1. Inventory the visible states
For a sign-in form, inspect the heading, field label, placeholder, typed value, hint, error text and submit button. Repeat with an invalid field and while navigating by keyboard. Include the page surface outside the form; an input boundary can touch a different color than its text does.
2. Separate text from component boundaries
W3C distinguishes text contrast from essential non-text information. For this example we use 4.5:1 for normal text and examine the field boundary separately at 3:1. A decorative divider is not automatically an essential boundary. Record why a border is needed to identify a field instead of applying the same rule to every line.
A reproducible text and background example.
Same pair, larger text.
##777777 / ##FFFFFF
Placeholder candidate: the numeric result below decides whether normal text passes.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##767676 / ##FFFFFF
A nearby correction to compare with the original placeholder.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fix3. Check focus and meaning
Tab to every control and make sure its focus remains visible, including under a sticky header. Do not label the WCAG 2.2 AAA Focus Appearance criterion as an AA rule. Describe errors in words, associate their text with the field, and add a visible cue beyond a red border. Test that the correction clears the error message appropriately.
4. Keep an audit record
Component: email field
State: invalid + focused
Text: #B91C1C on #FFFFFF
Boundary: #767676 on #FFFFFF
Meaning: "Enter a valid email address" + error icon
Manual follow-up: keyboard focus, zoom, screen-reader announcementOpen the error-text pair and save its result alongside your screen review. Recheck computed CSS after fixes and record any untested states.