Color for Emphasis
Avoid using only color for emphasis or to convey information since it may be meaningless to color blind users with specific color deficiencies as well as blind users.
|12 February||Waltz with Strauss||Main Hall|
|24 March||The Obelisks||West Wing|
|14 April||The What||Main Hall|
|Tickets are sold out!|
It’s okay to use color for emphasis or to convey information, but present information in formats that all users can understand.
|12 February||Waltz with Strauss||Main Hall||Sold Out!|
|24 March||The Obelisks||West Wing||Available|
|14 April||The What||Main Hall||Available|
Color Contrast Ratios
Sufficient contrast between foreground and background colors promotes readability. When contrast is low, readability of text is reduced. Recommended contrast ratios for foreground to background color.
- Main text: 4.5 to 1
- Large text (18+ points): 3 to 1
Microsoft Word Standard Colors
The results may seem surprising, but six of ten colors fail to meet the 4.5:1 threshold against a white background for main text. As you can see, use color cautiously and stick to the highest contrast combinations possible.
|Pass: 6.5 to 1||Fail: 4 to 1||Fail: 1.6 to 1||Fail: 1.1 to 1||Fail: 1.8 to 1|
|Fail: 2.9 to 1||Fail: 4.5 to 1||Pass: 5.1 to 1||Pass: 15 to 1||Pass: 8 to 1|
|Pass: 6 to 1||Fail: 2.9 to 1||Pass: 4.8 to 1||Pass: 9.3 to 1||Fail: 2 to 1|
|Pass: 21 to 1||Pass: 4.5:1||Fail: 1.8 to 1||Fail: 1.8 to 1||Pass: 4.5 to 1||Pass: 21: to 1|
Tools for Checking Contrast Ratios
- Colorzilla: extracts the color value from any page element
- WebAim Color Contrast Checker: For advanced users. Calculates contrast based on RGB hexidecimal format.
Last updated: 8/7/2018