Skip to content

Color Combinations for Accessibility

Jump to bottom
Izzy-Snyder edited this page Sep 17, 2025 · 2 revisions

Foreground/background color reference guide

Please refer to the accessibility guidelines in the contributor docs for a more in-depth breakdown of color accessibility and resources to learn more.

About the reference guide

2025 Open Source Intern Izzy Snyder created a tool that can be used to analyze a color palette and show which colors can be used for UI components on the main backgrounds, and which colors can be used for text on top of those UI components. The source code can be found here, and it is open source as well, so you can adapt and use it for other projects, too!

The color names used in the reference images are the tokens for different color values listed in _variables.scss in the p5 editor repository. They define a specific hex code with a color name like "lightest" or "p5js-pink" As you are working on the editor, you may also come across color names like "icon-hover-color" or "input-selection-background-color". These are used in each theme to define consistent colors for types of components like icons or input fields, but they pretty much always refer back to one of the color tokens. If you can't figure out what the color of a component is, try searching for the name of the color in the file _variables.scss, and you will be able to track down what that name refers to. The reference images also include some theme-specific colors that do not have a specific color token that they refer back to.

Screenshot 2025-09-17 at 2 10 21 PM

color tokens

Screenshot 2025-09-17 at 2 10 25 PM

semantic names for colors within a palette, most of which refer to a color token

Please note that for small text, a contrast ratio of 4.5:1 between foreground and background is required, while for large text and UI a lower contrast ratio of 3:1 is required.

Included on this page are photos for the light and dark/contrast p5 editor themes, as well as the same information represented in text form. The intention is for this tool to be accessible for blind/low vision contributors and those who use a keyboard to navigate the web, so if that is you, you can navigate to the headings "Dark/contrast theme text based reference" and "light theme text based reference".

Dark/contrast theme reference images

dark/contrast theme UI element palette dark/contrast theme lighter UI Elements text combinations dark/contrast theme light UI Elements text combinations dark/contrast theme hint fun text color(contrast) UI Elements text combinations dark/contrast theme hint arrow background active color (contrast) UI Elements text combinations dark/contrast theme middle light UI Elements text combinations dark/contrast theme hint inline text color(contrast) UI Elements text combinations dark/contrast theme hint var text color(contrast) UI Elements text combinations dark/contrast theme admonition border(contrast) UI Elements text combinations dark/contrast theme middle light UI Elements text combinations dark contrast theme table button background active color(dark) UI Elements text combinations dark/contrast theme hint fun active border bottom color(dark) UI Elements text combinations dark/contrast theme dodgerblue UI Elements text combinations dark/contrast theme hint keyword text color(dark) UI Elements text combinations dark/contrast theme hint var active border bottom color(dark) UI Elements text combinations dark/contrast theme middle gray UI Elements text combinations dark/contrast theme p5js pink UI Elements text combinations dark/contrast theme p5js active pink UI Elements text combinations dark/contrast theme middle gray UI Elements text combinations dark/contrast theme console active arrow color(dark) UI Elements text combinations

Light theme reference images

light theme UI element palette light theme darker UI Elements text combinations light theme dark UI Elements text combinations light theme medium dark UI Elements text combinations light theme admonition text(light) UI Elements text combinations light theme hint keyword text color(light) UI Elements text combinations light theme middle dark UI Elements text combinations light theme console active arrow color (light) UI Elements text combinations light theme middle gray UI Elements text combinations light theme hint fun active border bottom color(light) UI Elements text combinations light theme hint var active border bottom color(light) UI Elements text combinations light theme p5js active pink UI Elements text combinations light theme p5js pink UI Elements text combinations light theme middle gray UI Elements text combinations light theme dodgerblue UI Elements text combinations

Dark/contrast theme text based reference

The first subsection includes colors that can be used against the background itself either for UI or large text. The sections after are individual UI component colors with a list below of which text colors can be used on top.

UI or large text colors:

  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 17.0:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 16.5:1
  • light (#F0F0F0) [240, 240, 240] contrast: 15.0:1
  • hint-fun-text-color-(contrast) (#00FFFF) [0, 255, 255] contrast: 13.6:1
  • hint-arrow-background-active-color-(contrast) (#F5DC23) [245, 220, 35] contrast: 12.3:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 12.1:1
  • hint-inline-text-color-(contrast) (#CFCFCF) [207, 207, 207] contrast: 10.9:1
  • hint-var-text-color-(contrast) (#FFA9D9) [255, 169, 217] contrast: 9.7:1
  • admonition-border-(contrast) (#22C8ED) [34, 200, 237] contrast: 8.6:1
  • middle-light (#A6A6A6) [166, 166, 166] contrast: 7.0:1
  • table-button-background-active-color-(dark) (#00A1D3) [0, 161, 211] contrast: 5.7:1
  • hint-fun-active-border-bottom-color-(dark) (#0F9DD7) [15, 157, 215] contrast: 5.5:1
  • dodgerblue (#1E90FF) [30, 144, 255] contrast: 5.3:1
  • hint-keyword-text-color-(dark) (#B58318) [181, 131, 24] contrast: 5.1:1
  • hint-var-active-border-bottom-color-(dark) (#DE4A9B) [222, 74, 155] contrast: 4.5:1
  • middle-gray (#7D7D7D) [125, 125, 125] contrast: 4.1:1
  • p5js-pink (#ED225D) [237, 34, 93] contrast: 4.0:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 3.9:1
  • middle-gray (#747474) [116, 116, 116] contrast: 3.6:1
  • console-active-arrow-color-(dark) (#097BB3) [9, 123, 179] contrast: 3.6:1

UI component color: admonition-text-(contrast) (#FFFFFF)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 21.0:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 17.0:1
  • dark (#333333) [51, 51, 51] contrast: 12.6:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 8.5:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 7.5:1
  • middle-dark (#666666) [102, 102, 102] contrast: 5.7:1
  • middle-gray (#747474) [116, 116, 116] contrast: 4.7:1
  • console-active-arrow-color-(dark) (#097BB3) [9, 123, 179] contrast: 4.7:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 4.3:1
  • p5js-pink (#ED225D) [237, 34, 93] contrast: 4.2:1
  • middle-gray (#7D7D7D) [125, 125, 125] contrast: 4.1:1
  • hint-var-active-border-bottom-color-(dark) (#DE4A9B) [222, 74, 155] contrast: 3.8:1
  • hint-keyword-text-color-(dark) (#B58318) [181, 131, 24] contrast: 3.4:1
  • dodgerblue (#1E90FF) [30, 144, 255] contrast: 3.2:1
  • hint-fun-active-border-bottom-color-(dark) (#0F9DD7) [15, 157, 215] contrast: 3.1:1

UI component color: lighter (#FBFBFB)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 20.3:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 16.5:1
  • dark (#333333) [51, 51, 51] contrast: 12.2:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 8.2:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 7.3:1
  • middle-dark (#666666) [102, 102, 102] contrast: 5.5:1
  • middle-gray (#747474) [116, 116, 116] contrast: 4.5:1
  • console-active-arrow-color-(dark) (#097BB3) [9, 123, 179] contrast: 4.5:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 4.2:1
  • p5js-pink (#ED225D) [237, 34, 93] contrast: 4.1:1
  • middle-gray (#7D7D7D) [125, 125, 125] contrast: 4.0:1
  • hint-var-active-border-bottom-color-(dark) (#DE4A9B) [222, 74, 155] contrast: 3.7:1
  • hint-keyword-text-color-(dark) (#B58318) [181, 131, 24] contrast: 3.3:1
  • dodgerblue (#1E90FF) [30, 144, 255] contrast: 3.1:1

UI component color: light (#F0F0F0)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 18.4:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 15.0:1
  • dark (#333333) [51, 51, 51] contrast: 11.1:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 7.4:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 6.6:1
  • middle-dark (#666666) [102, 102, 102] contrast: 5.0:1
  • middle-gray (#747474) [116, 116, 116] contrast: 4.1:1
  • console-active-arrow-color-(dark) (#097BB3) [9, 123, 179] contrast: 4.1:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 3.8:1
  • p5js-pink (#ED225D) [237, 34, 93] contrast: 3.7:1
  • middle-gray (#7D7D7D) [125, 125, 125] contrast: 3.6:1
  • hint-var-active-border-bottom-color-(dark) (#DE4A9B) [222, 74, 155] contrast: 3.3:1

UI component color: hint-fun-text-color-(contrast) (#00FFFF)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 16.7:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 13.6:1
  • dark (#333333) [51, 51, 51] contrast: 10.1:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 6.7:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 6.0:1
  • middle-dark (#666666) [102, 102, 102] contrast: 4.6:1
  • middle-gray (#747474) [116, 116, 116] contrast: 3.7:1
  • console-active-arrow-color-(dark) (#097BB3) [9, 123, 179] contrast: 3.7:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 3.5:1
  • p5js-pink (#ED225D) [237, 34, 93] contrast: 3.4:1
  • middle-gray (#7D7D7D) [125, 125, 125] contrast: 3.3:1

UI component color: hint-arrow-background-active-color-(contrast) (#F5DC23)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 15.1:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 12.3:1
  • dark (#333333) [51, 51, 51] contrast: 9.1:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 6.1:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 5.4:1
  • middle-dark (#666666) [102, 102, 102] contrast: 4.1:1
  • middle-gray (#747474) [116, 116, 116] contrast: 3.4:1
  • console-active-arrow-color-(dark) (#097BB3) [9, 123, 179] contrast: 3.4:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 3.1:1

UI component color: medium-light (#D9D9D9)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 14.9:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 12.1:1
  • dark (#333333) [51, 51, 51] contrast: 9.0:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 6.0:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 5.3:1
  • middle-dark (#666666) [102, 102, 102] contrast: 4.1:1
  • middle-gray (#747474) [116, 116, 116] contrast: 3.3:1
  • console-active-arrow-color-(dark) (#097BB3) [9, 123, 179] contrast: 3.3:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 3.1:1

UI component color: hint-inline-text-color-(contrast) (#CFCFCF)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 13.5:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 10.9:1
  • dark (#333333) [51, 51, 51] contrast: 8.1:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 5.4:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 4.8:1
  • middle-dark (#666666) [102, 102, 102] contrast: 3.7:1

UI component color: hint-var-text-color-(contrast) (#FFA9D9)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 11.9:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 9.7:1
  • dark (#333333) [51, 51, 51] contrast: 7.2:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 4.8:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 4.3:1
  • middle-dark (#666666) [102, 102, 102] contrast: 3.3:1

UI component color: admonition-border-(contrast) (#22C8ED)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 10.6:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 8.6:1
  • dark (#333333) [51, 51, 51] contrast: 6.3:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 4.2:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 3.8:1

UI component color: middle-light (#A6A6A6)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 8.6:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 7.0:1
  • dark (#333333) [51, 51, 51] contrast: 5.2:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 3.5:1
  • admonition-background-(dark) (#105A7F) [16, 90, 127] contrast: 3.1:1

UI component color: table-button-background-active-color-(dark) (#00A1D3)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 7.0:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 5.7:1
  • dark (#333333) [51, 51, 51] contrast: 4.2:1

UI component color: hint-fun-active-border-bottom-color-(dark) (#0F9DD7)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 6.8:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 5.5:1
  • dark (#333333) [51, 51, 51] contrast: 4.1:1
  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 3.1:1

UI component color: dodgerblue (#1E90FF)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 6.5:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 5.3:1
  • dark (#333333) [51, 51, 51] contrast: 3.9:1
  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 3.2:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 3.1:1

UI component color: hint-keyword-text-color-(dark) (#B58318)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 6.2:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 5.1:1
  • dark (#333333) [51, 51, 51] contrast: 3.7:1
  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 3.4:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 3.3:1

UI component color: hint-var-active-border-bottom-color-(dark) (#DE4A9B)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 5.6:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 4.5:1
  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 3.8:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 3.7:1
  • light (#F0F0F0) [240, 240, 240] contrast: 3.3:1
  • dark (#333333) [51, 51, 51] contrast: 3.3:1

UI component color: middle-gray (#747474)

  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 4.7:1
  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 4.5:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.5:1
  • light (#F0F0F0) [240, 240, 240] contrast: 4.1:1
  • hint-fun-text-color-(contrast) (#00FFFF) [0, 255, 255] contrast: 3.7:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.6:1
  • hint-arrow-background-active-color-(contrast) (#F5DC23) [245, 220, 35] contrast: 3.4:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.3:1

UI component color: p5js-pink (#ED225D)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 5.0:1
  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 4.2:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.1:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 4.0:1
  • light (#F0F0F0) [240, 240, 240] contrast: 3.7:1
  • hint-fun-text-color-(contrast) (#00FFFF) [0, 255, 255] contrast: 3.4:1

UI component color: p5js-active-pink (#F10046)

  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 4.8:1
  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 4.3:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.2:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.9:1
  • light (#F0F0F0) [240, 240, 240] contrast: 3.8:1
  • hint-fun-text-color-(contrast) (#00FFFF) [0, 255, 255] contrast: 3.5:1
  • hint-arrow-background-active-color-(contrast) (#F5DC23) [245, 220, 35] contrast: 3.1:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.1:1

UI component color: middle-gray (#747474)

  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 4.7:1
  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 4.5:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.5:1
  • light (#F0F0F0) [240, 240, 240] contrast: 4.1:1
  • hint-fun-text-color-(contrast) (#00FFFF) [0, 255, 255] contrast: 3.7:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.6:1
  • hint-arrow-background-active-color-(contrast) (#F5DC23) [245, 220, 35] contrast: 3.4:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.3:1

UI component color: console-active-arrow-color-(dark) (#097BB3)

  • admonition-text-(contrast) (#FFFFFF) [255, 255, 255] contrast: 4.7:1
  • admonition-background-(contrast) (#000000) [0, 0, 0] contrast: 4.5:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.5:1
  • light (#F0F0F0) [240, 240, 240] contrast: 4.1:1
  • hint-fun-text-color-(contrast) (#00FFFF) [0, 255, 255] contrast: 3.7:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.6:1
  • hint-arrow-background-active-color-(contrast) (#F5DC23) [245, 220, 35] contrast: 3.4:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.3:1

Light theme text based reference

UI or large text colors:

  • darker (#1C1C1C) [28, 28, 28] contrast: 16.5:1
  • dark (#333333) [51, 51, 51] contrast: 12.2:1
  • medium-dark (#4D4D4D) [77, 77, 77] contrast: 8.2:1
  • admonition-text-(light) (#075769) [7, 87, 105] contrast: 7.9:1
  • hint-keyword-text-color-(light) (#7A5A3A) [122, 90, 58] contrast: 6.1:1
  • middle-dark (#666666) [102, 102, 102] contrast: 5.5:1
  • console-active-arrow-color-(light) (#0071AD) [0, 113, 173] contrast: 5.1:1
  • middle-gray (#747474) [116, 116, 116] contrast: 4.5:1
  • hint-fun-active-border-bottom-color-(light) (#0B7CA9) [11, 124, 169] contrast: 4.5:1
  • hint-var-active-border-bottom-color-(light) (#D52889) [213, 40, 137] contrast: 4.5:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 4.2:1
  • p5js-pink (#ED225D) [237, 34, 93] contrast: 4.1:1
  • middle-gray (#7D7D7D) [125, 125, 125] contrast: 4.0:1
  • dodgerblue (#1E90FF) [30, 144, 255] contrast: 3.1:1

UI component color: darker (#1C1C1C)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 16.5:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 15.6:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 15.5:1
  • light (#F0F0F0) [240, 240, 240] contrast: 15.0:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 12.1:1
  • middle-light (#A6A6A6) [166, 166, 166] contrast: 7.0:1
  • dodgerblue (#1E90FF) [30, 144, 255] contrast: 5.3:1
  • middle-gray (#7D7D7D) [125, 125, 125] contrast: 4.1:1
  • p5js-pink (#ED225D) [237, 34, 93] contrast: 4.0:1
  • p5js-active-pink (#F10046) [241, 0, 70] contrast: 3.9:1
  • middle-gray (#747474) [116, 116, 116] contrast: 3.6:1
  • hint-fun-active-border-bottom-color-(light) (#0B7CA9) [11, 124, 169] contrast: 3.6:1
  • hint-var-active-border-bottom-color-(light) (#D52889) [213, 40, 137] contrast: 3.6:1
  • console-active-arrow-color-(light) (#0071AD) [0, 113, 173] contrast: 3.2:1

UI component color: dark (#333333)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 12.2:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 11.5:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 11.5:1
  • light (#F0F0F0) [240, 240, 240] contrast: 11.1:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 9.0:1
  • middle-light (#A6A6A6) [166, 166, 166] contrast: 5.2:1
  • dodgerblue (#1E90FF) [30, 144, 255] contrast: 3.9:1
  • middle-gray (#7D7D7D) [125, 125, 125] contrast: 3.1:1

UI component color: medium-dark (#4D4D4D)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 8.2:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 7.7:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 7.7:1
  • light (#F0F0F0) [240, 240, 240] contrast: 7.4:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 6.0:1
  • middle-light (#A6A6A6) [166, 166, 166] contrast: 3.5:1

UI component color: admonition-text-(light) (#075769)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 7.9:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 7.4:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 7.4:1
  • light (#F0F0F0) [240, 240, 240] contrast: 7.2:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 5.8:1
  • middle-light (#A6A6A6) [166, 166, 166] contrast: 3.3:1

UI component color: hint-keyword-text-color-(light) (#7A5A3A)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 6.1:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 5.7:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 5.7:1
  • light (#F0F0F0) [240, 240, 240] contrast: 5.5:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 4.4:1

UI component color: middle-dark (#666666)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 5.5:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 5.2:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 5.2:1
  • light (#F0F0F0) [240, 240, 240] contrast: 5.0:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 4.1:1

UI component color: console-active-arrow-color-(light) (#0071AD)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 5.1:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 4.8:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 4.8:1
  • light (#F0F0F0) [240, 240, 240] contrast: 4.6:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.8:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.2:1

UI component color: middle-gray (#747474)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.5:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 4.3:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 4.2:1
  • light (#F0F0F0) [240, 240, 240] contrast: 4.1:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.6:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.3:1

UI component color: hint-fun-active-border-bottom-color-(light) (#0B7CA9)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.5:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 4.3:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 4.3:1
  • light (#F0F0F0) [240, 240, 240] contrast: 4.1:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.6:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.3:1

UI component color: hint-var-active-border-bottom-color-(light) (#D52889)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.5:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 4.3:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 4.2:1
  • light (#F0F0F0) [240, 240, 240] contrast: 4.1:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.6:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.3:1

UI component color: p5js-active-pink (#F10046)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.2:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 4.0:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 4.0:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.9:1
  • light (#F0F0F0) [240, 240, 240] contrast: 3.8:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.1:1

UI component color: p5js-pink (#ED225D)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.1:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 4.0:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 3.8:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 3.8:1
  • light (#F0F0F0) [240, 240, 240] contrast: 3.7:1

UI component color: middle-gray (#747474)

  • lighter (#FBFBFB) [251, 251, 251] contrast: 4.5:1
  • admonition-background-(light) (#E4F8FF) [228, 248, 255] contrast: 4.3:1
  • hint-item-hover-background-color-(light) (#F4F4F4) [244, 244, 244] contrast: 4.2:1
  • light (#F0F0F0) [240, 240, 240] contrast: 4.1:1
  • darker (#1C1C1C) [28, 28, 28] contrast: 3.6:1
  • medium-light (#D9D9D9) [217, 217, 217] contrast: 3.3:1

UI component color: dodgerblue (#1E90FF)

  • darker (#1C1C1C) [28, 28, 28] contrast: 5.3:1
  • dark (#333333) [51, 51, 51] contrast: 3.9:1
  • lighter (#FBFBFB) [251, 251, 251] contrast: 3.1:1
Clone this wiki locally