Skip to content

Commit 6bcd663

Browse files
Fix contrast color calculation
1 parent ede94dc commit 6bcd663

File tree

1 file changed

+28
-16
lines changed

1 file changed

+28
-16
lines changed

webapp/src/Twig/TwigExtension.php

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1148,12 +1148,11 @@ public function fileTypeIcon(string $type): string
11481148
return 'fas fa-file-' . $iconName;
11491149
}
11501150

1151-
public function problemBadge(ContestProblem $problem, bool $grayedOut = false): string
1151+
/**
1152+
* @return array{string, string}
1153+
*/
1154+
private function hexToForegroundAndBorder(string $rgb): array
11521155
{
1153-
$rgb = Utils::convertToHex($problem->getColor() ?? '#ffffff');
1154-
if ($grayedOut || empty($rgb)) {
1155-
$rgb = Utils::convertToHex('whitesmoke');
1156-
}
11571156
$background = Utils::parseHexColor($rgb);
11581157

11591158
// Pick a border that's a bit darker.
@@ -1163,8 +1162,29 @@ public function problemBadge(ContestProblem $problem, bool $grayedOut = false):
11631162
$darker[2] = max($darker[2] - 64, 0);
11641163
$border = Utils::rgbToHex($darker);
11651164

1166-
// Pick the foreground text color based on the background color.
1167-
$foreground = ($background[0] + $background[1] + $background[2] > 450) ? '#000000' : '#ffffff';
1165+
[$r, $g, $b] = $background;
1166+
1167+
// Calculate relative luminance
1168+
$r = ($r / 255 <= 0.03928) ? ($r / 255) / 12.92 : pow(($r / 255 + 0.055) / 1.055, 2.4);
1169+
$g = ($g / 255 <= 0.03928) ? ($g / 255) / 12.92 : pow(($g / 255 + 0.055) / 1.055, 2.4);
1170+
$b = ($b / 255 <= 0.03928) ? ($b / 255) / 12.92 : pow(($b / 255 + 0.055) / 1.055, 2.4);
1171+
1172+
$luminance = 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
1173+
1174+
$foreground = ($luminance > 0.179) ? '#000000' : '#FFFFFF';
1175+
1176+
return [$foreground, $border];
1177+
}
1178+
1179+
public function problemBadge(ContestProblem $problem, bool $grayedOut = false): string
1180+
{
1181+
$rgb = Utils::convertToHex($problem->getColor() ?? '#ffffff');
1182+
if ($grayedOut || empty($rgb)) {
1183+
$rgb = Utils::convertToHex('whitesmoke');
1184+
}
1185+
1186+
[$foreground, $border] = $this->hexToForegroundAndBorder($rgb);
1187+
11681188
if ($grayedOut) {
11691189
$foreground = 'silver';
11701190
$border = 'linen';
@@ -1184,17 +1204,9 @@ public function problemBadgeMaybe(ContestProblem $problem, ScoreboardMatrixItem
11841204
if (!$matrixItem->isCorrect || empty($rgb)) {
11851205
$rgb = Utils::convertToHex('whitesmoke');
11861206
}
1187-
$background = Utils::parseHexColor($rgb);
11881207

1189-
// Pick a border that's a bit darker.
1190-
$darker = $background;
1191-
$darker[0] = max($darker[0] - 64, 0);
1192-
$darker[1] = max($darker[1] - 64, 0);
1193-
$darker[2] = max($darker[2] - 64, 0);
1194-
$border = Utils::rgbToHex($darker);
1208+
[$foreground, $border] = $this->hexToForegroundAndBorder($rgb);
11951209

1196-
// Pick the foreground text color based on the background color.
1197-
$foreground = ($background[0] + $background[1] + $background[2] > 450) ? '#000000' : '#ffffff';
11981210
if (!$matrixItem->isCorrect) {
11991211
$foreground = 'silver';
12001212
$border = 'linen';

0 commit comments

Comments
 (0)