AA normal / large text: 4.5:1 / 3:1 AA non-text: 3:1 AAA normal / large text: 7:1 / 4.5:1

Color is important to any design. However, sometimes the contrast between background and foreground colors are difficult to read, especially for people with a vision impairment. WCAG 2.1 has guidelines that help define these accessible color contrast ratios:This tool should help you visualize an entire palette of all color combinations with accessibility in mind. The combinations are ordered by color contrast ratio. Try it out with these sample colors, and then create a palette of your own: