Color Safe

Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

Set Up Canvas and Text

Enter a background color, and determine the styling of your text. Accessible text colors are generated with
WCAG Guidelines recommend contrast ratio of 4.5 for small text or 3 for large text which is 24px or 18px bold.

Current Ratio {{currentTextColor.currentRatio}} Pass Fail
Goal Ratio {{WCAGlevel}} - {{currentRatio}}

Want more color options?

Changing the WCAG level to AA is less strict and will give you more color options.

Want more color options?

Increase font size to 24px or make font weight bold. Doing one of those will make the text 'Large Text' and give you more color options.

Change Font Size to 24px

Make font bold