2022-09-09 06:32:29 -04:00
|
|
|
---
|
|
|
|
|
title: Color Contrast
|
|
|
|
|
parent: Colors
|
|
|
|
|
nav_order: 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](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
2022-09-11 07:52:43 -04:00
|
|
|
|
2022-09-09 06:32:29 -04:00
|
|
|
|
|
|
|
|
Click on any block to run contrast checker and get more detailed info.
|
|
|
|
|
|
2022-09-11 07:52:43 -04:00
|
|
|
|
