Use Sufficient Color Contrast in Web Page Design

When the contrast between foreground and background colors is not sufficient it can be hard to distinguish outlines, borders, edges, and details and text can be hard to read. The minimum recommended contrast ratio is 4.5:1 for most text. Very large text (120-150% larger than the default body text) can be slightly lower at 3:1.

The contrast ratio of 4.5:1 was chosen because it compensates for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision which is commonly reported as typical visual acuity of people at about age 80.

References

• https://webaim.org/articles/contrast/
• https://webaim.org/resources/contrastchecker/
• Accessible Color Picker Chrome browser extension
• https://color.review/