Embedded Files
Use Contrasting Colors
Use Contrasting Colors
Provide enough contrast between text and its background. Use a contrast checker to confirm whenever using text and background colors other than black and white.
Sufficient contrast ratios are 4.5:1 for body text and 3:1 for 18pt and larger or bolded 14pt and larger.
Non-text elements such as user interface components and graphics needed to understand content need a contrast ratio of 3:1 with the colors around them.
Why?
Why?
When the contrast ratio between the text color and its background color is sufficiently high, the text can be read by people with moderately low vision. Because the measure of contrast used is based on lightness rather than hue, text with sufficient contrast is usually also perceivable by people with a color vision deficit, regardless of the colors used.
For more on color contrast, see WebAIM: Contrast and Color Accessibility.
How-To
How-To
Find Color Codes
Find Color Codes
The contrast checker requires you to have the color values of the text and background colors in RGB hexadecimal format (ex., #00274C). To find these values in Google Docs, Slides, or Sheets:
Select the color in the text, highlight, or fill color drop-down.
Click the plus symbol under "Custom"
Copy the hex value
You can also get an add-on for your browser that allows you to click on a color to get its value:
Use the Checker
Use the Checker
Visit WebAIM Contrast Checker
Enter a foreground (text) and background color in hex format (e.g., #FD3 or #F7DA39)
When contrast is sufficient, a green box will appear around the ratio and a green "Pass" label will appear next to the standard level (must pass at level AA; level AAA is ideal)
If colored text is large (14 point and bold or larger, or 18 point or larger), it can fail the "Normal text" test as long as it passes the "Large text" test
You can also use the color pickers and lightness slides on the Contrast Checker page to find colors with sufficient contrast.
Choose Accessible Colors for Charts and Graphs
Choose Accessible Colors for Charts and Graphs
Page updated
Report abuse