色彩对比指南

色彩对比指南

From documents and webpages to graphs and closed-captions, color contrast is an important facet of creating any accessible content. These guidelines will help you create colorful content that is still accessible to all.

一般知识

• 避免 color combinations that can create accessibility issues for people with color blindness.
  • Red and green; blue and yellow; purple and orange.
• The color contrast ratio of the text to background needs to be 4.5:1 to met Web Content 可访问性 Guidelines.
  • A ratio of 1:1 would be white on white while a ratio of 21:1 would be white on black.

选择合适的颜色

• The best contrasts exist between dark colors on light backgrounds. Using bright colors against a bright background however, creates a contrast problem.
• This does not mean colors are chosen based solely on contrast. 美学也很重要. While aesthetics can add flair and personality, avoid these choices:
  • 使用黑色作为背景. A black background makes it easy to select contrasting text, but it also creates issues when switching from a black background to a lighter one in the same presentation. 也, some studies indicate black backgrounds are tougher for folks with certain vision differences such as astigmatism.
  • Using Yellow or Red for text color:
    • Yellow text can contrast well with darker backgrounds, but it is no fun to read and cannot be paired with blue as is causes issues with color blindness.
    • Bright red text is hard to contrast as red on white has a ratio of 3.99:1

检查对比

• WebAIM, Web 可访问性 in Mind, has a very robust 对比检查 使用颜色十六进制代码.
  • To locate the hex code for a color in Microsoft Office: Expand the text color drop down, select 更多的颜色. The Colors pop-up window will open; select the Custom tab to choose any color and read its RBG values and hex code.
  • To locate the hex code in Canvas: Select the paint palette icon to choose any color and see its RBG values and hex code.
  • WebAIM also offers guidance on Evaluating Contrast with Chrome DevTools
•  ColorZilla has a downloadable eyedropper tool that allows you to select colors from anywhere in your browser and copy the value to your clipboard.