atlantafx/docs/colors/color-contrast.md
2022-09-11 15:52:43 +04:00

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