-
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Colors: add new function
chooseHigherContrast
- Loading branch information
Showing
5 changed files
with
68 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
// @flow strict | ||
|
||
import calculateContrastRatio from '../calculateContrastRatio'; | ||
import chooseHigherContrast from '../chooseHigherContrast'; | ||
|
||
// HELP: | ||
// [0, 0, 0], // black | ||
// [255, 255, 255], // white | ||
|
||
it('works when there is no good choice', () => { | ||
expect(chooseHigherContrast([0, 0, 0], [0, 0, 0], [0, 0, 0])).toStrictEqual([0, 0, 0]); | ||
expect(chooseHigherContrast([255, 255, 255], [255, 255, 255], [255, 255, 255])).toStrictEqual([ | ||
255, 255, 255, | ||
]); | ||
}); | ||
|
||
it('picks white color on black background', () => { | ||
expect(chooseHigherContrast([255, 255, 255], [128, 128, 128], [0, 0, 0])).toStrictEqual([ | ||
255, 255, 255, | ||
]); | ||
}); | ||
|
||
it('chooses the first foreground when contrasts are identical', () => { | ||
const fgA = [0, 0, 245]; | ||
const fgB = [125, 28, 123]; | ||
const bg = [133, 133, 133]; | ||
|
||
expect(calculateContrastRatio(fgA, bg)).toBe(2.45); | ||
expect(calculateContrastRatio(fgB, bg)).toBe(2.45); | ||
|
||
expect(chooseHigherContrast(fgA, fgB, bg)).toStrictEqual(fgA); | ||
expect(chooseHigherContrast(fgB, fgA, bg)).toStrictEqual(fgB); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
// @flow strict | ||
|
||
import calculateContrastRatio from './calculateContrastRatio'; | ||
|
||
/** | ||
* This function takes 2 possible foreground colors and returns the one which would create larger | ||
* contrast against the specified background. It can be used when you are deciding about the best | ||
* color for accessibility purposes (the one with higher contrast is better). | ||
*/ | ||
export default function chooseHigherContrast( | ||
rgbForegroundA: [number, number, number], | ||
rgbForegroundB: [number, number, number], | ||
rgbBackground: [number, number, number], | ||
): [number, number, number] { | ||
const foregroundAContrastRatio = calculateContrastRatio(rgbForegroundA, rgbBackground); | ||
const foregroundBContrastRatio = calculateContrastRatio(rgbForegroundB, rgbBackground); | ||
|
||
return foregroundAContrastRatio >= foregroundBContrastRatio ? rgbForegroundA : rgbForegroundB; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters