Nearest valid color suggestion function

[TheJaredWilcurt]

With WCAG, I can use tools to validate the contrast ratio of two colors, and if they have too low of contrast I can use tools to find what the closest color is to either of them that would give you the desired contrast.

Example:

import { makeHexesContrast } from 'color-contrast-picker';

function makeSuggestion (color, fixedColor) {
  const contrastRatio = 4.5;
  const suggestion = makeHexesContrast(color, fixedColor, contrastRatio);
  return suggestion.toUpperCase();
}
const foreground = '#00BD7E';
const background = '#464646';

const foregroundSuggestion = makeSuggestion(foreground, background); // '#00D18B'
const backgroundSuggestion = makeSuggestion(background, foreground); // '#3B3B3B'

Notice how the suggested colors meet the minimum contrast ratio, and are also very similar to the original colors. If I change either the text or background to one of these suggestions, it now passes the 4.5 contrast ratio requirement.

I want that, but for APCA. Currently the closest option I've found is reverseAPCA, but it has problems:

• Often times returns false instead of a color
• When it does suggest a color, it always returns black or white, unless one of the colors is already black or white, then it returns the nearest valid gray color. Not very useful.
• More complex to deal with, should just take in a HEX and return a HEX, since this is for web use. Color space conversions should be handled internally.

Here is a proposed API:

import {
  getNearestValidForegroundHex,
  getNearestValidBackgroundHex
} from 'apca-w3'; // or some other library

const settings = {
  desiredLc: 60,
  foreground: '#00BD7E',
  background: '#464646',
  fontSizePx: 15,
  fontWeight: 400
};

const foregroundSuggestion = getNearestValidForegroundHex(settings); // '#00D18B'
const backgroundSuggestion = getNearestValidBackgroundHex(settings); // '#3B3B3B'

[TheJaredWilcurt]

Thinking of this more, since APCA is multi-dimensional, the return could just be a string ('#00D18B'), like the above example, but it could also be a series of possible recommendations:

{
  nearestInHue: '#00D18B',
  nearestInLuma: '#00D18B',
  nearestInFontSize: 36,
  nearstInFontWeight: null
}

That would be more reflective of the spirit of APCA. Where you could choose to just change the font size or weight to retain the same colors, but make them meet your desired Lc.

Or an array of recommendations that would satisfy the results:

[
  {
    foreground: '#00D18B',
    size: 36,
    weight: 600
  },
  {
    foreground: '#000000',
    size: 14,
    weight: 500
  },
  // etc
]