From 615b13bb255db3551fd35f8590d46b6d830bd2a6 Mon Sep 17 00:00:00 2001 From: Gareth Rees Date: Tue, 28 May 2024 12:19:10 +0100 Subject: [PATCH] Improve note style colour contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BEFORE: * Red: https://webaim.org/resources/contrastchecker/?fcolor=D32A0E&bcolor=FDE7E3 (4.31:1 – bad) * Yellow: https://webaim.org/resources/contrastchecker/?fcolor=D3710E&bcolor=FDF0E3 (3.05:1 – bad) * Green: https://webaim.org/resources/contrastchecker/?fcolor=358753&bcolor=CFECDA (3.51:1 – bad) * Blue: https://webaim.org/resources/contrastchecker/?fcolor=006687&bcolor=EDFBFF (6.1:1 – pretty good) AFTER: * Red: https://webaim.org/resources/contrastchecker/?fcolor=8b1c0a&bcolor=FDE7E3 (7.81:1 – pass) * Yellow: https://webaim.org/resources/contrastchecker/?fcolor=733e08&bcolor=FDF0E3 (7.74:1 – pass) * Green: https://webaim.org/resources/contrastchecker/?fcolor=1f5031&bcolor=CFECDA (7.4:1 – pass) * Blue: https://webaim.org/resources/contrastchecker/?fcolor=00526e&bcolor=EDFBFF (8.15:1 – pass) Fixes https://github.com/mysociety/alaveteli/issues/8277. --- app/assets/stylesheets/responsive/_notes_styles.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/responsive/_notes_styles.scss b/app/assets/stylesheets/responsive/_notes_styles.scss index 2faaf5c90e..fffcc3d824 100644 --- a/app/assets/stylesheets/responsive/_notes_styles.scss +++ b/app/assets/stylesheets/responsive/_notes_styles.scss @@ -2,19 +2,19 @@ $note-text: $oil; $note-bg: lighten($primary-color, 60%); $note-border: $primary-color; -$note-red-text: darken($alert-color, 10%); +$note-red-text: darken($alert-color, 25%); $note-red-bg: lighten($alert-color, 40%); $note-red-border: $alert-color; -$note-green-text: darken($success-color, 10%); +$note-green-text: darken($success-color, 25%); $note-green-bg: lighten($success-color, 40%); $note-green-border: $success-color; -$note-blue-text: darken($primary-color, 10%); +$note-blue-text: darken($primary-color, 15%); $note-blue-bg: lighten($primary-color, 60%); $note-blue-border: $primary-color; -$note-yellow-text: darken($warning-color, 10%); +$note-yellow-text: darken($warning-color, 30%); $note-yellow-bg: lighten($warning-color, 40%); $note-yellow-border: $warning-color;