color-contrast-table

A vanilla javascript function that takes an array of colors and returns the WCAG contast scores for all of their possible color combinations.

Input

You can pass an array of colors:

[
  "red",
  "#0000ff",
  "rgb(0,255,0)"
]

You can pass an array of objects that contains a color name a value:

[
  {
    "name": "red",
    "value": "red"
  },
  {
    "name": "blue",
    "value": "#0000ff"
  },
  {
    "name": "green",
    "value": "rgb(0,255,0)"
  }
]

You can get crazy:

[
  "black",
  "#ffffff",
  {
    "name": "red",
    "value": "red"
  },
  {
    "name": "blue",
    "value": "#0000ff"
  },
  {
    "name": "green",
    "value": "rgb(0,255,0)"
  }
]

You can NOT get too crazy: (but I might add this feature in the future...)

[
  "black",
  "#ffffff",
  {
    "name": "grays",
    "value": [
      "lightgray",
      "gray",
      "darkgray"
    ]
  },
]

Output

You will get an array back with this shape

[
  {
    "name":"red",
    "value":"#ff0000",
    "combinationScores": [
      {
        "name":"blue",
        "value":"#0000ff",
        "ratio":"2.1",
        "score":"fail"
      },
      {
        "name":"green",
        "value":"#00ff00",
        "ratio":"2.9",
        "score":"fail"
      }
    ]
  },
  {
    "name":"blue",
    "value":"#0000ff",
    "combinationScores": [
      {
        "name":"red",
        "value":"#ff0000",
        "ratio":"2.1",
        "score":"fail"
      },
      {
        "name":"green",
        "value":"#00ff00",
        "ratio":"6.3",
        "score":"AA"
      }
    ]
  },
  {
    "name":"green",
    "value":"#00ff00",
    "combinationScores": [
      {
        "name":"red",
        "value":"#ff0000",
        "ratio":"2.9",
        "score":"fail"
      },
      {
        "name":"blue",
        "value":"#0000ff",
        "ratio":"6.3",
        "score":"AA"
      }
    ]
  }
]

Score Key

• AAA - The contrast ratio was greater than 7.0
  • this is a great score, you can definitely use this combination
• AA - The contrast ratio was greater than 4.5, but less than 7
  • this is a pretty good score, safe for most applications
• 18+ - The contrast ratio was greater than 3.0, but less than 4.5
  • this means this color combo is safe for text larger than 18px
• fail - The contrast ratio was less than 3.
  • this is a bad score, please be very careful using this combination of text and background