polypane.app

check_color_contrast

Check the contrast between a foreground and background color using WCAG 2 (contrast ratio) or APCA (Lc value), and get suggested accessible replacements. Also updates the colors and algorithm shown on the page. Returns: algorithm used; rating (WCAG ratio, or absolute APCA Lc); checks, an array with one entry per use (normalText, largeText, icons) giving the target rating and whether the rating passes it; and suggestions, a list of complete foreground/background pairs with the target it was generated for and the rating it achieves (the background is unchanged unless the foreground alone could not reach the target). An empty suggestions list means either the colors already pass for all text, or no accessible alternative could be found.

Page: /color-contrast/

Input schema

{
  "type": "object",
  "properties": {
    "foreground": {
      "type": "string",
      "description": "Foreground (text) color in any CSS format, e.g. #107db5 or rgb(16 125 181)"
    },
    "background": {
      "type": "string",
      "description": "Background color in any CSS format. May include alpha."
    },
    "algorithm": {
      "type": "string",
      "enum": [
        "WCAG2",
        "APCA"
      ],
      "description": "Contrast algorithm. Defaults to WCAG2."
    },
    "level": {
      "type": "string",
      "enum": [
        "aa",
        "aaa"
      ],
      "description": "WCAG2 conformance level. Defaults to aa."
    }
  },
  "required": [
    "foreground",
    "background"
  ]
}