Color Safe is an easy to use web based accessibility tool, which empowers designers with beautiful and accessible color palettes based on the WCAG Guidelines for text and background contrast ratios.

Once you arrive at the Color Safe site, you will see a “Get Started” button (Fig.1). Clicking on that button will scroll you down to the “Set Up Canvas and Text” section (Fig.2), where you can set your background color, font-family, font-size, font-weight, and the WCAG Standard you want to abide by. You even have an area where you can edit the text. Once you have configured your settings, click on the “Generate Color Palette” button and it will scroll you down to a color palette. Here you will be able to choose what color you want your text to be (Fig.3). You can select any color you want from the palette and can chose to either see the hexadecimal color or RGB color code for that chosen color, as well as see its contrast ratio score.

There are plenty of accessibility tools out there to check the color contrast ratio between a background and foreground color, but I find Color Safe to be the most efficient and intuitive.

Color Safe Screenshots
Color Safe homepage
Fig.1 Color Safe Home Page
Color Safe Set up canvas and text section
Fig.2 Color Safe Set Up Canvas and Text Section
Generated Color Safe palette
Fig.3 Color Safe Generated Color Palette Section