Have ideas to improve npm?Join in the discussion! »

    color-contrast-table

    4.0.0 • Public • Published

    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

    Install

    npm i color-contrast-table

    DownloadsWeekly Downloads

    400

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    41 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar