WCAG requires a particular contrast ratio between foreground colors and background colors.
- AA compliance requires a contrast ratio of 4.5:1 for normal text (14 point and bold or larger) and 3:1 for large text (18 point or larger).
- AAA compliance requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.
Additionally, when establishing a color palette, keep in mind the two most common forms of color blindness are:
- Red-Green color blindness, the inability to distinguish between red and green hues
- Blue-Yellow color blindness and Total Color blindness
Some tools you can use to obtain the contrast ratio and see if you meet compliance standards:
- WebAIM Color Contrast Checker: http://webaim.org/resources/contrastchecker/
- Contrast Ratio tool: http://leaverou.github.io/contrast-ratio/