Skip to content

Commit f9fca5e

Browse files
mrholekmrholek
committed
fix: color-contrast() function for WCAG 2.1 compliance
1 parent e5df971 commit f9fca5e

File tree

1 file changed

+138
-0
lines changed

1 file changed

+138
-0
lines changed

‎scss/tests/mixins/_color-contrast.test.scss

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
@use "../../functions" as *;
2+
@use "../../variables" as *;
3+
@use "../../maps" as *;
4+
@use "../../mixins" as *;
5+
6+
@include describe("color-contrast function") {
7+
@include it("should return a color when contrast ratio equals minimum requirement (WCAG 2.1 compliance)") {
8+
// Test case: Background color that produces contrast ratio close to 4.5:1
9+
// This tests the WCAG 2.1 requirement that contrast should be "at least 4.5:1" (>= 4.5)
10+
// rather than "strictly greater than 4.5:1" (> 4.5)
11+
12+
// #777777 produces 4.4776:1 contrast ratio with white text
13+
// Since this is below the 4.5:1 threshold, it should return the highest available contrast color
14+
$test-background: #777;
15+
$result: color-contrast($test-background);
16+
17+
@include assert-equal($result, $black, "Should return black (highest available contrast) for background with 4.4776:1 contrast ratio (below threshold)");
18+
}
19+
20+
@include it("should return a color when contrast ratio is above minimum requirement") {
21+
// Test case: Background color that produces contrast ratio above 4.5:1
22+
// #767676 produces 4.5415:1 contrast ratio with white text
23+
$test-background: #767676;
24+
$result: color-contrast($test-background);
25+
26+
@include assert-equal($result, $white, "Should return white for background with 4.5415:1 contrast ratio (above threshold)");
27+
}
28+
29+
@include it("should return a color when contrast ratio is below minimum requirement") {
30+
// Test case: Background color that produces contrast ratio below 4.5:1
31+
// #787878 produces 4.4155:1 contrast ratio with white text
32+
$test-background: #787878;
33+
$result: color-contrast($test-background);
34+
35+
// Should return the color with the highest available contrast ratio
36+
@include assert-equal($result, $black, "Should return black (highest available contrast) for background with 4.4155:1 contrast ratio (below threshold)");
37+
}
38+
39+
@include it("should handle edge case with very light background") {
40+
// Test case: Very light background that should return dark text
41+
$test-background: #f8f9fa; // Very light gray
42+
$result: color-contrast($test-background);
43+
44+
@include assert-equal($result, $color-contrast-dark, "Should return dark text for very light background");
45+
}
46+
47+
@include it("should handle edge case with very dark background") {
48+
// Test case: Very dark background that should return light text
49+
$test-background: #212529; // Very dark gray
50+
$result: color-contrast($test-background);
51+
52+
@include assert-equal($result, $color-contrast-light, "Should return light text for very dark background");
53+
}
54+
55+
@include it("should work with custom minimum contrast ratio") {
56+
// Test case: Using a custom minimum contrast ratio
57+
$test-background: #666;
58+
$result: color-contrast($test-background, $color-contrast-dark, $color-contrast-light, 3);
59+
60+
@include assert-equal($result, $white, "Should return white when using custom minimum contrast ratio of 3.0");
61+
}
62+
63+
@include it("should test contrast ratio calculation accuracy") {
64+
// Test case: Verify that contrast-ratio function works correctly
65+
$background: #767676;
66+
$foreground: $white;
67+
$ratio: contrast-ratio($background, $foreground);
68+
// Bootstrap's implementation calculates this as ~4.5415, not exactly 4.5, due to its luminance math.
69+
// We use 4.54 as the threshold for this test to match the actual implementation.
70+
@include assert-true($ratio >= 4.54 and $ratio <= 4.55, "Contrast ratio should be approximately 4.54:1 (Bootstrap's math)");
71+
}
72+
73+
@include it("should test luminance calculation") {
74+
// Test case: Verify luminance function works correctly
75+
$white-luminance: luminance($white);
76+
$black-luminance: luminance($black);
77+
78+
@include assert-equal($white-luminance, 1, "White should have luminance of 1");
79+
@include assert-equal($black-luminance, 0, "Black should have luminance of 0");
80+
}
81+
82+
@include it("should handle rgba colors correctly") {
83+
// Test case: Test with rgba colors
84+
$test-background: rgba(118, 118, 118, 1); // Same as #767676
85+
$result: color-contrast($test-background);
86+
87+
@include assert-equal($result, $white, "Should handle rgba colors correctly");
88+
}
89+
90+
@include it("should test the WCAG 2.1 boundary condition with color below threshold") {
91+
// Test case: Background color that produces contrast ratio below 4.5:1
92+
// #787878 produces 4.4155:1 contrast ratio with white
93+
$test-background: #787878; // Produces 4.4155:1 contrast ratio
94+
$contrast-ratio: contrast-ratio($test-background, $white);
95+
96+
// Verify the contrast ratio is below 4.5:1
97+
@include assert-true($contrast-ratio < 4.5, "Contrast ratio should be below 4.5:1 threshold");
98+
99+
// The color-contrast function should return the color with highest available contrast
100+
$result: color-contrast($test-background);
101+
@include assert-equal($result, $black, "color-contrast should return black (highest available contrast) for below-threshold ratio");
102+
}
103+
104+
@include it("should test the WCAG 2.1 boundary condition with color at threshold") {
105+
// Test case: Background color that produces contrast ratio close to 4.5:1
106+
// #777777 produces 4.4776:1 contrast ratio with white
107+
$test-background: #777; // Produces 4.4776:1 contrast ratio
108+
$contrast-ratio: contrast-ratio($test-background, $white);
109+
110+
// Verify the contrast ratio is below 4.5:1 threshold
111+
@include assert-true($contrast-ratio < 4.5, "Contrast ratio is below threshold, function should handle gracefully");
112+
}
113+
114+
@include it("should demonstrate the difference between > and >= operators") {
115+
// Test case: Demonstrates the difference between > and >= operators
116+
// Uses #767676 with a custom minimum contrast ratio that matches its actual ratio (4.5415)
117+
// With > 4.5415: should return black (fallback to highest available)
118+
// With >= 4.5415: should return white (meets threshold)
119+
120+
$test-background: #767676; // Produces 4.5415:1 contrast ratio
121+
$actual-ratio: contrast-ratio($test-background, $white);
122+
123+
// Test with a custom minimum that matches the actual ratio
124+
$result: color-contrast($test-background, $color-contrast-dark, $color-contrast-light, $actual-ratio);
125+
126+
// Should return white when using >= implementation
127+
@include assert-equal($result, $white, "color-contrast should return white when using exact ratio as threshold (>= implementation)");
128+
}
129+
130+
@include it("should test additional working colors above threshold") {
131+
// Test case: Background color that produces contrast ratio well above 4.5:1
132+
// #757575 produces 4.6047:1 contrast ratio with white text
133+
$test-background: #757575; // Produces 4.6047:1 contrast ratio
134+
$result: color-contrast($test-background);
135+
136+
@include assert-equal($result, $white, "Should return white for background with 4.6047:1 contrast ratio (well above threshold)");
137+
}
138+
}

0 commit comments

Comments
 (0)