Merge pull request #20269 from calixteman/dichotomic_find_color
Use a dichotomy to find a color with a good contrast ratio
This commit is contained in:
commit
1cae8e2933
@ -16,7 +16,6 @@
|
||||
import {
|
||||
BaseException,
|
||||
FeatureTest,
|
||||
MathClamp,
|
||||
shadow,
|
||||
Util,
|
||||
warn,
|
||||
@ -931,18 +930,36 @@ function findContrastColor(baseColor, fixedColor) {
|
||||
// Use the contrast ratio requirements from WCAG 2.1.
|
||||
// https://www.w3.org/TR/WCAG21/#contrast-minimum
|
||||
// https://www.w3.org/TR/WCAG21/#contrast-enhanced
|
||||
const minContrast = isFixedColorDark ? 7 : 4.5;
|
||||
const minContrast = isFixedColorDark ? 12 : 4.5;
|
||||
|
||||
baseHSL[2] = isFixedColorDark
|
||||
? Math.sqrt(baseHSL[2])
|
||||
: 1 - Math.sqrt(1 - baseHSL[2]);
|
||||
const increment = isFixedColorDark ? 0.01 : -0.01;
|
||||
let contrast = contrastRatio(baseHSL, fixedHSL, output);
|
||||
while (baseHSL[2] >= 0 && baseHSL[2] <= 1 && contrast < minContrast) {
|
||||
baseHSL[2] += increment;
|
||||
contrast = contrastRatio(baseHSL, fixedHSL, output);
|
||||
|
||||
if (contrastRatio(baseHSL, fixedHSL, output) < minContrast) {
|
||||
let start, end;
|
||||
if (isFixedColorDark) {
|
||||
start = baseHSL[2];
|
||||
end = 1;
|
||||
} else {
|
||||
start = 0;
|
||||
end = baseHSL[2];
|
||||
}
|
||||
baseHSL[2] = MathClamp(baseHSL[2], 0, 1);
|
||||
const PRECISION = 0.005;
|
||||
while (end - start > PRECISION) {
|
||||
const mid = (baseHSL[2] = (start + end) / 2);
|
||||
if (
|
||||
isFixedColorDark ===
|
||||
contrastRatio(baseHSL, fixedHSL, output) < minContrast
|
||||
) {
|
||||
start = mid;
|
||||
} else {
|
||||
end = mid;
|
||||
}
|
||||
}
|
||||
baseHSL[2] = isFixedColorDark ? end : start;
|
||||
}
|
||||
|
||||
HSLToRGB(baseHSL, output);
|
||||
cachedValue = Util.makeHexColor(
|
||||
Math.round(output[0] * 255),
|
||||
|
||||
@ -307,7 +307,7 @@ describe("display_utils", function () {
|
||||
describe("findContrastColor", function () {
|
||||
it("Check that the lightness is changed correctly", function () {
|
||||
expect(findContrastColor([210, 98, 76], [197, 113, 89])).toEqual(
|
||||
"#240d09"
|
||||
"#260e09"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user