Colored text should be made more accessible

[guidezpl]

Describe the problem

The accessibility of the blue and green text used throughout the site could be improved

For example

Expected fix

Darken the colors used

Additional context

No response

[tomByrer]

I think there are new contrast color guidelines coming out, but I can't find automation for it ATT.

[Myndex]

Hello @tomByrer @guidezpl I'm going to answer this in two parts.

I • New Contrast Info

There is indeed for WCAG_3 a new contrast method, do note that it is not "backwards" compatible with WCAG_2 contrast, though it is useable now if you do not have a contractual or legal requirement for using specifically WCAG_2 or 2.1

As WCAG_2 and 3 are in scope only for web content, other contrast guidance can be used, depending on the medium. Per laws such as the United States ADA, accessibility for web sites IS required, but ADA does not specify WCAG_2 are the required standard for non-governmental sites.

(Your Mileage May Vary!!)

II • It's Not Easy Being Green....

Especially if you need to be the darkest color. Keep in mind that the vast majority of luminance (lightness) comes from the green primary in the monitor. Green is the only primary that can reasonably be alone against black. In opposition, green has a problem against white, and must be set very dark.

Thank you

Andy

[Myndex]

OOPS forgot, here's the npm install, import, and useage:

QuickStart

Install

    npm i apca-w3

Import

    import { APCAcontrast, sRGBtoY, displayP3toY, colorParsley } from 'apca-w3';

Usage:

PARSE:
If you need to parse a color string or 24bit number, use the colorParsley() function:

    let rgbaArray = colorParsley('aliceblue');

CONVERT TO Ys
Send rgba INT array [123,123,123,1.0] to sRGBtoY() — this is a slightly different luminance Y that the IEC oiecewise.

    let Ys = sRGBtoY([123,123,123,1.0]);

FIND Lc CONTRAST
First color must be text, second color must be the background.

    let textColor = [17,17,17,255];
    let backgroundColor = [232,230,221,255];
    
    let contrastLc = APCAcontrast( sRGBtoY( textColor ), sRGBtoY( backgroundColor ) );

String Theory

The following are the available input types for colorParsley(), HSL is not implemented at the moment. All are automatically recognized:

INPUT as STRINGS:

• No Alpha

  • '#abc' or 'abc' (interpreted as 'aabbcc')
  • '#abcdef' or 'abcdef' (hash is ignored)
  • 'rgb(123, 45, 67)'
  • 'aquamarine' or 'magenta' (full CSS4 named colors list)

• With Alpha (alpha is NOT presently calculated, and assumed as fully opaque)

  • '#abcf' or 'abcf' (interpreted as 'aabbccff')
  • '#123456ff' or '123456ff' (hash is ignored)
  • 'rgba(123, 45, 67,255)'

INPUT as NUMBER:

• As hex
  • 0xabcdef
• As integer
  • 11259375

No alpha parsing for numbers in part as there are big and little endian issues that need to be resolved.

Parsing Removal

The function is called "colorParsley()" because what is that useless leafy thing the restaurant puts on the plate? Well, most mature software already has good parsing, and you may want to minimize the file leaving all that "parsley" at the restaurant.

In the src folder .js file, there is a /*/ type code toggle, see the comments just before the parsing functions. you can disable the entire set of parsing functions by removing a slash before minimizing if you like to go lean and clean.

This changes the import you need to use to:

             // import with parsing off/removed:
    import { APCAcontrast, sRGBtoY, displayP3toY } from 'apca-w3';

Font Use Lookup Table

Latest Lookup Table: Dec 17 2021

// APCA FONT LOOKUP TABLE 0.98G-4g-b3
// Font Size and Reference Font Weight
// THIS GRID FOR FLUENT TEXT USE CASE ONLY DEC 12 2021

const apcaFluentGrid = [
   ["min", "min", "min", "min", "min", "min", "min", "min", "min"],
   ["min", "min", "min", "min", "min", "min", "min", "min", "min"],
   ["min", "min", "min", 95, 90, 85, 80, "min", "min"],
   ["min", "min", "min", 90, 85, 80, 75, "min", "min"],
   ["min", "min", 95, 80, 75, 65, 60, 55, "min"],
   ["min", "min", 90, 75, 65, 60, 55, 50, 45],
   ["min", 95, 85, 65, 60, 55, 50, 45, 40],
   ["min", 90, 75, 60, 55, 50, 45, 40, 35],
   ["min", 85, 70, 55, 50, 45, 40, 35, 30],
   [90, 75, 60, 50, 45, 40, 35, 30, "max"],
   [85, 70, 55, 45, 40, 35, 30, "max", "max"],
   [75, 60, 50, 40, 35, 30, "max", "max", "max"],
   [70, 55, 45, 35, 30, "max", "max", "max", "max"],
   [60, 45, 40, 30, "max", "max", "max", "max", "max"],
 ];

Thank you!

Andy

[atsansone]

This issue is being addressed in #9427. Closing this issue as a duplicate.