---
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.

![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 %})