
The grid-display they provide is excellent for selecting colors for your website design. You can enter Hex values to create and compare your color combinations. They have displayed a sample of different color combinations using blue, black, and white. Contrast Grid:Ĭontrast Grid helps you test background and foreground combinations for compliance according to WCAG 2.0 standards. They also provide an option to add your checks to history so that you can compare them easily.
#Accessible colors pdf#
You can even save the sample as a PDF for future reference. So if you have a shade in mind from an image, you can easily upload it for selecting the foreground or background color. One unique feature included in this tool is the ability to extract colors from images.

Contrast checker also displays the ratio of the foreground and background color.

Along with this, you can even share the samples of your checks and reset it. They have provided an option to flip between color and grayscale instantly. The sample is then checked against different WCAG visual standards such as AA, AAA, AA 18pt, AAA 18pt, colors (pass or fail), and color difference number. Contrast Checker:Ĭontrast checker allows you to choose a color for foreground and background on the screen and get an immediate sample for 12pt and 18pt. You can select AAA specifications in the WCAG dropdown menu, and the colors generated will comply. However, if ’you’re designing a website for a government or a company, you would require AAA specifications. If you don’t select the WCAG standard, the tool uses AA level guidelines. The tool uses a ratio-based formula to generate palette and determine color combinations.

The created palette can be arranged by general color groups and selections that can be previewed at the top of the screen. The tool will generate a palette of options for your text color.
#Accessible colors code#
You need to enter the Hex code for the font family, text size, font weight, background color, and WCAG standard. It is a web application that helps designers to choose color combinations that meet WCAG 2.0 guidelines created for people with different visual capabilities. Color Safe:Ĭolor safe was designed by Adrian Rapp and Donielle Berg (Salesforce UX Engineer).
