Skip to content

Address colour contrast issues in the decorative caps #424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
helenb merged 1 commit into from
Mar 12, 2026
Merged

Address colour contrast issues in the decorative caps #424

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions tbx/static_src/sass/config/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ $color--black: #000;
// Motif heading flames
// - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000
// - The hex colours used should be the same as --color--theme-primary-dark 594da6 and --color--theme-secondary-dark 2aa487
--motif-heading: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="175" height="52" viewBox="0 0 175 52"><g opacity="0.9"><path d="M57.8061 2.34276C39.7613 31.4183 9.07605 34.6393 -1.1599 34.8156C-2.13719 34.8473 -2.53657 33.5774 -1.72909 33.0318C9.25215 25.8164 13.2114 15.1428 10.6324 0.889267C10.106 -1.76179 9.73242 -5.00795 9.61022 -8.10325C9.61022 -8.10325 9.39885 -11.7328 9.86502 -16.2608L9.70374 -16.2202C3.23729 -13.0951 -1.22162 -7.39167 -3.40699 -4.10142C-3.94312 -3.32425 -5.13103 -3.625 -5.21922 -4.50209C-5.57001 -8.6961 -5.60742 -16.8229 -2.24338 -23.6641C5.92331 -40.192 24.9128 -50.7061 43.4848 -45.3994C44.3606 -45.1486 44.4278 -44.0093 43.5805 -43.6249C40.8364 -42.2496 38.0989 -39.6341 35.6696 -35.5974C30.052 -26.2624 31.5763 -6.04824 31.5763 -6.04824C31.5763 -6.04824 50.1663 -14.1923 55.7839 -23.5272C58.2436 -27.6144 59.2714 -31.2559 59.1995 -34.321C59.1919 -35.2184 60.2309 -35.6938 60.8135 -35.0695C73.9225 -21.7086 57.8061 2.34276 57.8061 2.34276Z" fill="%236cd9bf" style="mix-blend-mode:screen"/></g><g opacity="0.8"><path d="M-6.56905 36.3538C26.8925 26.9749 39.7237 -2.91276 43.1476 -13.1535C43.4886 -14.1267 42.4049 -14.9113 41.6278 -14.2638C31.2555 -5.39628 19.8195 -4.63333 7.04976 -11.5252C4.68955 -12.854 1.71333 -14.2086 -1.199 -15.2649C-1.199 -15.2649 -4.59236 -16.572 -9.05785 -17.4687L-8.96784 -17.6186C-3.93142 -23.1793 2.92476 -25.9435 6.75694 -27.149C7.66846 -27.4539 7.75956 -28.7392 6.95135 -29.0924C3.06415 -30.7099 -4.67243 -33.1982 -12.2652 -31.8781C-30.6212 -28.6493 -46.6859 -12.723 -47.5335 7.55443C-47.5729 8.51082 -46.5081 8.92197 -45.872 8.18579C-43.6879 5.84089 -40.3235 3.87662 -35.702 2.65087C-25.0148 -0.183483 -6.22646 7.44519 -6.22646 7.44519C-6.22646 7.44519 -19.9044 23.6845 -30.5915 26.5189C-35.2708 27.76 -39.0697 27.6955 -41.9692 26.6989C-42.8224 26.4206 -43.6062 27.3221 -43.1963 28.0963C-34.627 45.3086 -6.56905 36.3538 -6.56905 36.3538Z" fill="%236f60d0" style="mix-blend-mode:screen"/></g></svg>');
--motif-heading: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="175" height="52" viewBox="0 0 175 52"><g opacity="0.9"><path d="M57.8061 2.34276C39.7613 31.4183 9.07605 34.6393 -1.1599 34.8156C-2.13719 34.8473 -2.53657 33.5774 -1.72909 33.0318C9.25215 25.8164 13.2114 15.1428 10.6324 0.889267C10.106 -1.76179 9.73242 -5.00795 9.61022 -8.10325C9.61022 -8.10325 9.39885 -11.7328 9.86502 -16.2608L9.70374 -16.2202C3.23729 -13.0951 -1.22162 -7.39167 -3.40699 -4.10142C-3.94312 -3.32425 -5.13103 -3.625 -5.21922 -4.50209C-5.57001 -8.6961 -5.60742 -16.8229 -2.24338 -23.6641C5.92331 -40.192 24.9128 -50.7061 43.4848 -45.3994C44.3606 -45.1486 44.4278 -44.0093 43.5805 -43.6249C40.8364 -42.2496 38.0989 -39.6341 35.6696 -35.5974C30.052 -26.2624 31.5763 -6.04824 31.5763 -6.04824C31.5763 -6.04824 50.1663 -14.1923 55.7839 -23.5272C58.2436 -27.6144 59.2714 -31.2559 59.1995 -34.321C59.1919 -35.2184 60.2309 -35.6938 60.8135 -35.0695C73.9225 -21.7086 57.8061 2.34276 57.8061 2.34276Z" fill="%232aa487" style="mix-blend-mode:screen"/></g><g opacity="0.8"><path d="M-6.56905 36.3538C26.8925 26.9749 39.7237 -2.91276 43.1476 -13.1535C43.4886 -14.1267 42.4049 -14.9113 41.6278 -14.2638C31.2555 -5.39628 19.8195 -4.63333 7.04976 -11.5252C4.68955 -12.854 1.71333 -14.2086 -1.199 -15.2649C-1.199 -15.2649 -4.59236 -16.572 -9.05785 -17.4687L-8.96784 -17.6186C-3.93142 -23.1793 2.92476 -25.9435 6.75694 -27.149C7.66846 -27.4539 7.75956 -28.7392 6.95135 -29.0924C3.06415 -30.7099 -4.67243 -33.1982 -12.2652 -31.8781C-30.6212 -28.6493 -46.6859 -12.723 -47.5335 7.55443C-47.5729 8.51082 -46.5081 8.92197 -45.872 8.18579C-43.6879 5.84089 -40.3235 3.87662 -35.702 2.65087C-25.0148 -0.183483 -6.22646 7.44519 -6.22646 7.44519C-6.22646 7.44519 -19.9044 23.6845 -30.5915 26.5189C-35.2708 27.76 -39.0697 27.6955 -41.9692 26.6989C-42.8224 26.4206 -43.6062 27.3221 -43.1963 28.0963C-34.627 45.3086 -6.56905 36.3538 -6.56905 36.3538Z" fill="%23594da6" style="mix-blend-mode:screen"/></g></svg>');
}

// Lagoon theme, light mode
Expand All @@ -225,7 +225,7 @@ $color--black: #000;
// Motif heading flames
// - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000
// - The hex colours used should be the same as --color--theme-primary-dark 007886 and --color--theme-secondary-dark 40a29b
--motif-heading: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="175" height="52" viewBox="0 0 175 52"><g opacity="0.9"><path d="M57.8061 2.34276C39.7613 31.4183 9.07605 34.6393 -1.1599 34.8156C-2.13719 34.8473 -2.53657 33.5774 -1.72909 33.0318C9.25215 25.8164 13.2114 15.1428 10.6324 0.889267C10.106 -1.76179 9.73242 -5.00795 9.61022 -8.10325C9.61022 -8.10325 9.39885 -11.7328 9.86502 -16.2608L9.70374 -16.2202C3.23729 -13.0951 -1.22162 -7.39167 -3.40699 -4.10142C-3.94312 -3.32425 -5.13103 -3.625 -5.21922 -4.50209C-5.57001 -8.6961 -5.60742 -16.8229 -2.24338 -23.6641C5.92331 -40.192 24.9128 -50.7061 43.4848 -45.3994C44.3606 -45.1486 44.4278 -44.0093 43.5805 -43.6249C40.8364 -42.2496 38.0989 -39.6341 35.6696 -35.5974C30.052 -26.2624 31.5763 -6.04824 31.5763 -6.04824C31.5763 -6.04824 50.1663 -14.1923 55.7839 -23.5272C58.2436 -27.6144 59.2714 -31.2559 59.1995 -34.321C59.1919 -35.2184 60.2309 -35.6938 60.8135 -35.0695C73.9225 -21.7086 57.8061 2.34276 57.8061 2.34276Z" fill="%23b6e2df" style="mix-blend-mode:screen"/></g><g opacity="0.8"><path d="M-6.56905 36.3538C26.8925 26.9749 39.7237 -2.91276 43.1476 -13.1535C43.4886 -14.1267 42.4049 -14.9113 41.6278 -14.2638C31.2555 -5.39628 19.8195 -4.63333 7.04976 -11.5252C4.68955 -12.854 1.71333 -14.2086 -1.199 -15.2649C-1.199 -15.2649 -4.59236 -16.572 -9.05785 -17.4687L-8.96784 -17.6186C-3.93142 -23.1793 2.92476 -25.9435 6.75694 -27.149C7.66846 -27.4539 7.75956 -28.7392 6.95135 -29.0924C3.06415 -30.7099 -4.67243 -33.1982 -12.2652 -31.8781C-30.6212 -28.6493 -46.6859 -12.723 -47.5335 7.55443C-47.5729 8.51082 -46.5081 8.92197 -45.872 8.18579C-43.6879 5.84089 -40.3235 3.87662 -35.702 2.65087C-25.0148 -0.183483 -6.22646 7.44519 -6.22646 7.44519C-6.22646 7.44519 -19.9044 23.6845 -30.5915 26.5189C-35.2708 27.76 -39.0697 27.6955 -41.9692 26.6989C-42.8224 26.4206 -43.6062 27.3221 -43.1963 28.0963C-34.627 45.3086 -6.56905 36.3538 -6.56905 36.3538Z" fill="%230096a8" style="mix-blend-mode:screen"/></g></svg>');
--motif-heading: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="175" height="52" viewBox="0 0 175 52"><g opacity="0.9"><path d="M57.8061 2.34276C39.7613 31.4183 9.07605 34.6393 -1.1599 34.8156C-2.13719 34.8473 -2.53657 33.5774 -1.72909 33.0318C9.25215 25.8164 13.2114 15.1428 10.6324 0.889267C10.106 -1.76179 9.73242 -5.00795 9.61022 -8.10325C9.61022 -8.10325 9.39885 -11.7328 9.86502 -16.2608L9.70374 -16.2202C3.23729 -13.0951 -1.22162 -7.39167 -3.40699 -4.10142C-3.94312 -3.32425 -5.13103 -3.625 -5.21922 -4.50209C-5.57001 -8.6961 -5.60742 -16.8229 -2.24338 -23.6641C5.92331 -40.192 24.9128 -50.7061 43.4848 -45.3994C44.3606 -45.1486 44.4278 -44.0093 43.5805 -43.6249C40.8364 -42.2496 38.0989 -39.6341 35.6696 -35.5974C30.052 -26.2624 31.5763 -6.04824 31.5763 -6.04824C31.5763 -6.04824 50.1663 -14.1923 55.7839 -23.5272C58.2436 -27.6144 59.2714 -31.2559 59.1995 -34.321C59.1919 -35.2184 60.2309 -35.6938 60.8135 -35.0695C73.9225 -21.7086 57.8061 2.34276 57.8061 2.34276Z" fill="%23007886" style="mix-blend-mode:screen"/></g><g opacity="0.8"><path d="M-6.56905 36.3538C26.8925 26.9749 39.7237 -2.91276 43.1476 -13.1535C43.4886 -14.1267 42.4049 -14.9113 41.6278 -14.2638C31.2555 -5.39628 19.8195 -4.63333 7.04976 -11.5252C4.68955 -12.854 1.71333 -14.2086 -1.199 -15.2649C-1.199 -15.2649 -4.59236 -16.572 -9.05785 -17.4687L-8.96784 -17.6186C-3.93142 -23.1793 2.92476 -25.9435 6.75694 -27.149C7.66846 -27.4539 7.75956 -28.7392 6.95135 -29.0924C3.06415 -30.7099 -4.67243 -33.1982 -12.2652 -31.8781C-30.6212 -28.6493 -46.6859 -12.723 -47.5335 7.55443C-47.5729 8.51082 -46.5081 8.92197 -45.872 8.18579C-43.6879 5.84089 -40.3235 3.87662 -35.702 2.65087C-25.0148 -0.183483 -6.22646 7.44519 -6.22646 7.44519C-6.22646 7.44519 -19.9044 23.6845 -30.5915 26.5189C-35.2708 27.76 -39.0697 27.6955 -41.9692 26.6989C-42.8224 26.4206 -43.6062 27.3221 -43.1963 28.0963C-34.627 45.3086 -6.56905 36.3538 -6.56905 36.3538Z" fill="%2340a29b" style="mix-blend-mode:screen"/></g></svg>');
}

// Green theme, light mode
Expand All @@ -240,7 +240,7 @@ $color--black: #000;
// Motif heading flames
// - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000
// - The hex colours used should be the same as --color--theme-primary-dark 2e6660 and --color--theme-secondary-dark ae8f02
--motif-heading: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="175" height="52" viewBox="0 0 175 52"><g opacity="0.9"><path d="M57.8061 2.34276C39.7613 31.4183 9.07605 34.6393 -1.1599 34.8156C-2.13719 34.8473 -2.53657 33.5774 -1.72909 33.0318C9.25215 25.8164 13.2114 15.1428 10.6324 0.889267C10.106 -1.76179 9.73242 -5.00795 9.61022 -8.10325C9.61022 -8.10325 9.39885 -11.7328 9.86502 -16.2608L9.70374 -16.2202C3.23729 -13.0951 -1.22162 -7.39167 -3.40699 -4.10142C-3.94312 -3.32425 -5.13103 -3.625 -5.21922 -4.50209C-5.57001 -8.6961 -5.60742 -16.8229 -2.24338 -23.6641C5.92331 -40.192 24.9128 -50.7061 43.4848 -45.3994C44.3606 -45.1486 44.4278 -44.0093 43.5805 -43.6249C40.8364 -42.2496 38.0989 -39.6341 35.6696 -35.5974C30.052 -26.2624 31.5763 -6.04824 31.5763 -6.04824C31.5763 -6.04824 50.1663 -14.1923 55.7839 -23.5272C58.2436 -27.6144 59.2714 -31.2559 59.1995 -34.321C59.1919 -35.2184 60.2309 -35.6938 60.8135 -35.0695C73.9225 -21.7086 57.8061 2.34276 57.8061 2.34276Z" fill="%23fde05f" style="mix-blend-mode:screen"/></g><g opacity="0.8"><path d="M-6.56905 36.3538C26.8925 26.9749 39.7237 -2.91276 43.1476 -13.1535C43.4886 -14.1267 42.4049 -14.9113 41.6278 -14.2638C31.2555 -5.39628 19.8195 -4.63333 7.04976 -11.5252C4.68955 -12.854 1.71333 -14.2086 -1.199 -15.2649C-1.199 -15.2649 -4.59236 -16.572 -9.05785 -17.4687L-8.96784 -17.6186C-3.93142 -23.1793 2.92476 -25.9435 6.75694 -27.149C7.66846 -27.4539 7.75956 -28.7392 6.95135 -29.0924C3.06415 -30.7099 -4.67243 -33.1982 -12.2652 -31.8781C-30.6212 -28.6493 -46.6859 -12.723 -47.5335 7.55443C-47.5729 8.51082 -46.5081 8.92197 -45.872 8.18579C-43.6879 5.84089 -40.3235 3.87662 -35.702 2.65087C-25.0148 -0.183483 -6.22646 7.44519 -6.22646 7.44519C-6.22646 7.44519 -19.9044 23.6845 -30.5915 26.5189C-35.2708 27.76 -39.0697 27.6955 -41.9692 26.6989C-42.8224 26.4206 -43.6062 27.3221 -43.1963 28.0963C-34.627 45.3086 -6.56905 36.3538 -6.56905 36.3538Z" fill="%23398078" style="mix-blend-mode:screen"/></g></svg>');
--motif-heading: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="175" height="52" viewBox="0 0 175 52"><g opacity="0.9"><path d="M57.8061 2.34276C39.7613 31.4183 9.07605 34.6393 -1.1599 34.8156C-2.13719 34.8473 -2.53657 33.5774 -1.72909 33.0318C9.25215 25.8164 13.2114 15.1428 10.6324 0.889267C10.106 -1.76179 9.73242 -5.00795 9.61022 -8.10325C9.61022 -8.10325 9.39885 -11.7328 9.86502 -16.2608L9.70374 -16.2202C3.23729 -13.0951 -1.22162 -7.39167 -3.40699 -4.10142C-3.94312 -3.32425 -5.13103 -3.625 -5.21922 -4.50209C-5.57001 -8.6961 -5.60742 -16.8229 -2.24338 -23.6641C5.92331 -40.192 24.9128 -50.7061 43.4848 -45.3994C44.3606 -45.1486 44.4278 -44.0093 43.5805 -43.6249C40.8364 -42.2496 38.0989 -39.6341 35.6696 -35.5974C30.052 -26.2624 31.5763 -6.04824 31.5763 -6.04824C31.5763 -6.04824 50.1663 -14.1923 55.7839 -23.5272C58.2436 -27.6144 59.2714 -31.2559 59.1995 -34.321C59.1919 -35.2184 60.2309 -35.6938 60.8135 -35.0695C73.9225 -21.7086 57.8061 2.34276 57.8061 2.34276Z" fill="%23ae8f02" style="mix-blend-mode:screen"/></g><g opacity="0.8"><path d="M-6.56905 36.3538C26.8925 26.9749 39.7237 -2.91276 43.1476 -13.1535C43.4886 -14.1267 42.4049 -14.9113 41.6278 -14.2638C31.2555 -5.39628 19.8195 -4.63333 7.04976 -11.5252C4.68955 -12.854 1.71333 -14.2086 -1.199 -15.2649C-1.199 -15.2649 -4.59236 -16.572 -9.05785 -17.4687L-8.96784 -17.6186C-3.93142 -23.1793 2.92476 -25.9435 6.75694 -27.149C7.66846 -27.4539 7.75956 -28.7392 6.95135 -29.0924C3.06415 -30.7099 -4.67243 -33.1982 -12.2652 -31.8781C-30.6212 -28.6493 -46.6859 -12.723 -47.5335 7.55443C-47.5729 8.51082 -46.5081 8.92197 -45.872 8.18579C-43.6879 5.84089 -40.3235 3.87662 -35.702 2.65087C-25.0148 -0.183483 -6.22646 7.44519 -6.22646 7.44519C-6.22646 7.44519 -19.9044 23.6845 -30.5915 26.5189C-35.2708 27.76 -39.0697 27.6955 -41.9692 26.6989C-42.8224 26.4206 -43.6062 27.3221 -43.1963 28.0963C-34.627 45.3086 -6.56905 36.3538 -6.56905 36.3538Z" fill="%232e6660" style="mix-blend-mode:screen"/></g></svg>');
}

// --------------------------------- Fonts -------------------------------------
Expand Down
Loading