Fixes by subject · 29 techniques
How to Fix Color and Contrast Problems
The most-failed rule on the web. Also the one people are most confident a machine has already settled for them.
Low-contrast text turns up on the large majority of home pages, year after year, which makes it the most common failure anybody measures. It is also the one people assume a machine settles for good. It does not. Where some of the pixels behind a line of text pass and some do not, there is no clear method for deciding whether the text is legible. So a green tick from a contrast checker is not the same thing as a met criterion. The techniques here cover meeting the ratios and pairing color with a second cue, so meaning never rides on hue alone. The same goes for the shape, size and position cues that 1.3.3 covers, which is a different criterion from the color one and sits here because the fix is the same move. The rest are about letting people apply their own colors, and the failures that come from text over images and from links marked by color alone.
All 29 techniques
They run in technique order, and each one carries a tag. Sufficient techniques satisfy a rule. Advisory ones help without being required. Failures document a specific way of getting it wrong. None of them is mandatory, because W3C publishes techniques as documented ways of meeting a criterion rather than the only ways, so your own approach conforms as long as it meets the criterion.
- G18Sufficient1.4.3, 1.4.6Meet the 4.5:1 contrast ratio for text
- F73Failure1.4.1Do not mark links by color alone
- C15Sufficient1.4.1, 2.4.7Style the focus indicator instead of removing it
- C23Sufficient1.4.8Let main content follow user color settings
- C25Sufficient1.4.8Mark out page areas without hard-coding colors
- C40Sufficient1.4.11, 2.4.7, 2.4.13Build focus indicators that work on any background
- F13Failure1.1.1, 1.4.1Do not write alt text that drops color meaning
- F14Failure1.3.3Never identify content by shape or location alone
- F24Failure1.4.3, 1.4.6, 1.4.8Never set text color without its background
- F26Failure1.3.3Do not let a symbol alone carry meaning
- F78Failure1.4.11, 2.4.7, 2.4.13Never remove the keyboard focus outline with CSS
- F81Failure1.4.1Do not mark required or error fields by color alone
- F83Failure1.4.3, 1.4.6Do not set text over a low-contrast background image
- G14Sufficient1.4.1Say in text what color alone signals
- G17Sufficient1.4.6Meet the enhanced 7:1 contrast ratio
- G96Sufficient1.3.3Identify items by more than shape or position
- G111Sufficient1.4.1Pair color coding with patterns and shapes
- G138Sufficient1.3.1Add semantic markup wherever color carries meaning
- G145Sufficient1.4.3Give large text at least 3:1 contrast
- G148Sufficient1.4.3, 1.4.6, 1.4.8Leave text colors default, or set both
- G156Sufficient1.4.3, 1.4.6, 1.4.8Keep text recolorable by the user's browser
- G174Sufficient1.4.3, 1.4.6, 1.4.11Offer a working switch to high-contrast view
- G175Sufficient1.4.8Let readers pick their own text colors
- G182Sufficient1.4.1Back up color-coded text with another cue
- G183Sufficient1.4.1Make color-only links contrast and respond
- G195Sufficient1.4.11, 2.4.7, 2.4.13Ship a clearly visible custom focus indicator
- G205Sufficient1.4.1Add text cues to color-coded field labels
- G207Sufficient1.4.11Give meaningful icons 3:1 contrast
- G209Sufficient1.4.11Separate adjoining chart colors with real contrast
More on Colour and contrast
The other 13 subjects
Knowing the technique is not the same as knowing you need it.
The free scan checks 10 pages in a real browser and maps every machine-checkable failure to the exact fix guide that clears it.