Contrast makes an important element stand out from its surroundings. On a page with repeated buttons, consistent columns, and a restrained color palette, a large slogan and prominent call-to-action button interrupt the pattern and draw the eye first. Without an established pattern, there is little for an element to stand out against. section 11.1
Build a hierarchy rather than making everything prominent:
- Use color differences: a light navigation button can stand out among darker buttons. section 11.1
- Use size and whitespace: large text with generous space around it attracts attention. section 11.1
- Keep repeated elements consistent. Reusable button styles establish the pattern that a featured button can break. section 11.1
Emphasize an action, quiet a footer
Give ordinary buttons a green outline and text, then give the primary button a dark-green background and white text. For the low-priority footer, use smaller gray text on a light-gray background. Contrast can reduce attention as well as attract it. section 11.2
Attention is not the only concern: text must remain readable against its background. WCAG contrast recommendations distinguish regular from large text and level AA from the stricter level AAA. Aim for AAA on main body text where practical; AA may be more suitable for colored labels or decorative text. section 11.4
Table 11.1 WCAG text contrast recommendations
|
Level AA
|
Level AAA
|
|
|---|---|---|
|
Regular text
|
4.5:1
|
7:1
|
|
Large text
|
3:1
|
4.5:1
|
Compare text and background colors against the recommended ratios: regular text requires 4.5:1 for AA or 7:1 for AAA; large text requires 3:1 or 4.5:1, respectively. section 11.4
A passing ratio does not guarantee equally readable type. Two paragraphs with identical colors can appear different when one uses a thin font weight. Check the rendered result, and give thin text stronger color contrast when needed. section 11.4
