Good design depends on the colour contrast and the ratio of background and foreground colours. See how you can obtain this with Golden Ratio Colors.
Update: May 29, 2023
How can you tell if your colour choice is accessible? It depends on the colour contrast and the ratio of background and foreground colours.
WCAG Guidelines for Colour Contrast
Making web designs fully accessible may sound like an overwhelming task, but adhering to colour contrast is an easy win. And you can get started right away.
The first step is to check your colour choices with one of the many colour contrast assessment tools, such as the WebAIM Contrast Checker tool.
https://webaim.org/resources/contrastchecker/
If you have not paid special attention to colour contrast, it is likely that your product will have colour contrast issues. Many common modern UX and UI design practices, such as using light grey to indicate inactive fields, do not comply with the Web Content Accessibility Guidelines (WCAG) when it comes to colour contrast standards.
The WCAG 2.0 Level AA guidelines are considered the standard for website accessibility in America and beyond. In terms of colour contrast, the guidelines state that text and text images should have a contrast ratio of at least 4.5:1.
There are some exceptions to this rule, including:
- Large text (defined as 14 point and bold or larger, or 18 point or larger) should have a contrast ratio of at least 3:1.
- Incidental text or images of text that are purely decorative and serve no user purpose do not need to meet the colour contrast requirements.
- Brand logos do not need to meet the colour contrast requirements.
https://stackoverflow.com/questions/7260989/how-to-pick-good-contrast-rgb-colors-programmatically