Color Contrast Viewer

• This color contrast display is implemented in a data table with a caption. The table is marked up with the appropriate table headers and data cells.
• Some cells within the table may have color contrast issues by design to demonstrate the contrast between the selected colors.

• Enter your color values in the textarea(s) below.
• Colors must be entered as hex color codes followed by a comma, and $color-name where color-name is replaced with your name for the hex color code.
• To have a different set of background and foreground colors, select the Toggle Input Fields
• Select the Pearson Brand button to automatically load the Pearson Brand colors
• Click the Show buttons to hide the different color contrast results

The initial idea for this color contrast grid came from eightshapes. I wanted to create a tool that could quickly display the Pearson Brand colors and show the contrast between them as well as address a couple of accessibility issues that I identified. This tool is a work in progress and will be updated as needed.