About Contrast + Color
Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. Web Content Accessibility Guidelines (WCAG) defines contrast as a measure of the difference in perceived "luminance" or brightness between two colors. This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white).
Contrast + Color in WCAG 2.1 AA
The Web Content Accessibility Guidelines (WCAG) 2.1 specify minimum contrast ratios for AA compliance. We have chosen AA level of conformance for WCAG 2.1 because it is meaningfully impactful, achievable, and the most common legal standard.
- Normal Text: At least 4.5:1 for text smaller than 18pt (or 14pt bold)
- Large Text: At least 3:1 for text 18pt or larger (or 14pt bold or larger)
- Non-Text Elements: At least 3:1 for graphical elements like icons and buttons
See WGAC 2.1 Success Criterion 1.4.3 for more information about Normal Text and Large Text, and WGAC 2.1 Success Criterion 1.4.11 for more information about Non-Text Elements.
How do Synthesis Accessibility Checker Contrast + Color Tests work?
Most Styles
For most of the styles in Synthesis 6, we compare the color of the style to the background color of Synthesis.
For example, our default color for Normal Text in Light Mode is #444444 and the background color of Light Mode is #FFFFFF, which yields a contrast ratio of 9.73:1. Our default color for Normal Text in Dark Mode is #CCCCCC and the background color of Dark Mode is #1A1D21, which yields a contrast ratio of 10.53:1.
Text Highlight Colors
For Text Highlight Colors, we compare the color of Normal Text to the Highlight Color.
For example, our default color for Normal Text in Light Mode is #444444 and the default color of Highlight Color 1 in Dark Mode is #FF968D, which yields a contrast ratio of 4.63:1. Our default color for Normal Text in Dark Mode is #CCCCCC and the default color of Highlight Color 1 in Dark Mode is #AD0900, which yields a contrast ratio of 4.64:1.
Why do some tests contain “N/A” as the result?
Some of our styles are only used in limited circumstances. For example, underline colors for text links are not text, so the only relevant test for underline colors is Non-Text Element. You’ll see “N/A” in the Normal Text and Large Text columns for underline colors..
Similarly, highlight colors are only used with text, so the only relevant tests for highlight colors are Normal Text and Large Text.You’ll see “N/A” in the Non-Text Element column for highlight colors.
Why aren’t all styles tested by the Synthesis Accessibility Checker?
Many styles in Synthesis are considered to be either “inactive user interface components” or “pure decoration” by WCAG 2.1 AA, therefore we aren’t testing their contrast and color for conformance. You can learn more about “Incidental Styles” in WGAC 2.1 Success Criterion 1.4.3.
How can I find accessible colors for Light Mode and Dark Mode?
The Accessible Light and Dark Colors in the Apple Color Palette is a great jumping off point. We used Apple colors to help define our defaults because they were both accessible and pleasing.
How can I test colors?
In Synthesis you can test colors in the Style Editor section of Branding.
The Contrast Checker from WebAIM is a wonderful tool for testing colors outside of Synthesis.
Limitations of the Synthesis Accessibility Checker
The Synthesis Accessibility Checker cannot test Custom CSS, images, or non-Synthesis icons.
While the Synthesis Accessibility Checker is a powerful tool, it is not a replacement for a manual audit by a web accessibility expert.