03.3.4 · Skill in UI design
Color
Using color for meaning, emphasis and brand, with enough contrast.
Color in interfaces should carry meaning, such as state, emphasis or category, more than decoration. Limited palettes with defined roles keep things consistent. Contrast has to work for everyone, including in dark mode.
Resources
2- courseStart hereColor and contrast ↗web.dev (Google) · 2022 · 8 min
How contrast ratios work, the WCAG thresholds, and the tools that check them for you.
- articleGo deeperBuilding a color scheme ↗Adam Argyle (web.dev) · 2021 · 15 min
Building a light and dark palette in CSS with enough contrast in both, step by step.
Tools
1- ToolFreeWebAIM Contrast Checker
Checks whether a text and background color pair meets the WCAG contrast ratios.