Added color contrast minimum constants documentation

Author: ksen0

src/color/p5.Color.js

@@ -26,7 +26,7 @@ import {
 
   OKLab,
   OKLCH as OKLCHSpace,
-  contrast,
+  contrastWCAG21,
   P3
 } from 'colorjs.io/fn';
 import HSBSpace from './color_spaces/hsb.js';
@@ -294,15 +294,22 @@ class Color {
     }
     return colorString;
   }
-/**
+
+  /**
    * Checks the contrast between two colors, to make sure that they
    * are different enough to be readable. The result of this function is
-   * a number that can be compared to `COLOR_CONTRAST_THRESHOLD_AA`,
-   * or to `COLOR_CONTRAST_THRESHOLD_AAA`. Shapes and UI elements should have color
-   * contrast at least `COLOR_CONTRAST_THRESHOLD_AA`, and text
-   * benefits from higher contrast of at least `COLOR_CONTRAST_THRESHOLD_AAA`.
+   * a color contrast ratio that can be compared to `COLOR_CONTRAST_MINIMUM_GRAPHICS`,
+   * or to `COLOR_CONTRAST_MINIMUM_TEXT`. The higher the ratio, the more
+   * different colors are, and the more legible to a user.
+   * 
+   * Graphics, interface elements, and large text should have a color
+   * contrast ratio of at least 4.5 (`COLOR_CONTRAST_MINIMUM_GRAPHICS`)
+   * 
+   * Smaller text - less than at least 14 point or 19 pixels -
+   * should have a color contrast ratio of at least 7
+   * (`COLOR_CONTRAST_MINIMUM_TEXT`)
    * 
-   * You can also explore this
+   * The constants are based on WCAG AAA recommendations, which you can also explore in this
    * <a href="https://webaim.org/resources/contrastchecker/">contrast checker tool</a>.
    * The contrast function in p5.js uses the WCAG 2.1 method the
    * <a href="https://colorjs.io/docs/contrast.html">color.js contrast</a>
@@ -359,9 +366,9 @@ class Color {
    *     newFg1Color = color(random(255), random(255), random(255));
    *     newFg2Color = color(random(255), random(255), random(255));
    *     if (
-   *       newBgColor.contrast(newFg2Color) > COLOR_CONTRAST_THRESHOLD_AAA &&
-   *       newBgColor.contrast(newFg1Color) > COLOR_CONTRAST_THRESHOLD_AA &&
-   *       newBgColor.contrast(newFg1Color) < COLOR_CONTRAST_THRESHOLD_AAA ){
+   *       newBgColor.contrast(newFg2Color) >= COLOR_CONTRAST_MINIMUM_TEXT &&
+   *       newBgColor.contrast(newFg1Color) >= COLOR_CONTRAST_MINIMUM_GRAPHICS &&
+   *       newBgColor.contrast(newFg1Color) < COLOR_CONTRAST_MINIMUM_TEXT ){
    *       
    *       bgColor = newBgColor;
    *       fg1Color = newFg1Color;

src/core/constants.js

@@ -1373,16 +1373,20 @@ export const EXCLUDE = Symbol('exclude');
 export const JOIN = Symbol('join');
 
 /**
- * @typedef {'color-contrast-threshold-aa'} COLOR_CONTRAST_THRESHOLD_AA
- * @property {COLOR_CONTRAST_THRESHOLD_AA} COLOR_CONTRAST_THRESHOLD_AA
+ * Can be used with `Color.contrast` to check if graphics, UI elements, and large text
+ * have enough contrast.
+ * @typedef {'color-contrast-minimum-graphics'} COLOR_CONTRAST_MINIMUM_GRAPHICS
+ * @property {COLOR_CONTRAST_MINIMUM_GRAPHICS} COLOR_CONTRAST_MINIMUM_GRAPHICS
  * @final
  */
-export const COLOR_CONTRAST_THRESHOLD_AA = 4.5;
+export const COLOR_CONTRAST_MINIMUM_GRAPHICS = 4.5;
 
 
 /**
- * @typedef {'color-contrast-threshold-aaa'} COLOR_CONTRAST_THRESHOLD_AAA
- * @property {COLOR_CONTRAST_THRESHOLD_AAA} COLOR_CONTRAST_THRESHOLD_AAA
+ * Can be used with `Color.contrast` to check if text smaller than 14pt (~19px)
+ * has enough contrast.
+ * @typedef {'color-contrast-minimum-text'} COLOR_CONTRAST_MINIMUM_TEXT
+ * @property {COLOR_CONTRAST_MINIMUM_TEXT} COLOR_CONTRAST_MINIMUMD_TEXT
  * @final
  */
-export const COLOR_CONTRAST_THRESHOLD_AAA = 7.0;
+export const COLOR_CONTRAST_MINIMUM_TEXT = 7.0;