I start my adventure as a front end developer and I wonder about the easiest way to choose the color groups used in css for my projects. For example, I have a group of grayscale colors. How large should the "distances" between them be (assuming that they are placed on top of each other eg text on the background) to ensure good visibility? Is there any universal method to determine this?
1 Answer
You can check the contrast ratio between the colors. According to WCAG, the minimum contrast ratio for text and background should be 4.5:1, except for large text, where it can be 3:1. This will improve accessibility and make sure people can read the text on your page.
You can test the contrast ratio from your color on this page: https://contrast-ratio.com/
