atlantafx/docs/colors/color-contrast.md

25 lines
780 B
Markdown
Raw Normal View History

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
![Color Contrast]({{ site.baseurl }}{% link /assets/images/color-contrast.png %})
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
![Contrast Checker]({{ site.baseurl }}{% link /assets/images/contrast-checker.png %})