780 B
780 B
title | parent | nav_order |
---|---|---|
Color Contrast | Colors | 3 |
If you want to develop a good theme, there are some accessibility rules.
Color contrast between text and its background must meet required WCAG standards.
The contrast requirements are:
- 4.5:1 for normal text
- 3:1 for large text (>24px)
- 3:1 for UI elements and graphics
- No contrast requirement for decorative and disabled elements
You can check and modify color contrast directly in the Sampler app.
![Color Contrast]({{ site.baseurl }}{% link /assets/images/color-contrast.png %})
Click on any block to run contrast checker and get more detailed info.
![Contrast Checker]({{ site.baseurl }}{% link /assets/images/contrast-checker.png %})