Skip to content

Commit

Permalink
ID-426 Always lighten secondary nav with black.
Browse files Browse the repository at this point in the history
Switch from lighten to tint as this always gets it a % of the way to white, rather than lighten which could send an already-light colour almost all the way to white and look ridiculous.
  • Loading branch information
halfninja committed Oct 1, 2024
1 parent c6f6364 commit a182d05
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions less/mixins/wcag.less
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
@result: if(@contrast-ratio-dark >= @contrast-ratio-light,
@dark,
@light
)
);
}

// Similar to .contrast, but it will strongly prefer the preferred colour
Expand All @@ -21,7 +21,6 @@
// If they don't, you may get a result that doesn't pass AA.
.contrast-fallback(@background, @preferred, @fallback) {
@contrast-ratio-preferred: #wcag.contrast-ratio(@background, @preferred)[@result];
@contrast-ratio-fallback: #wcag.contrast-ratio(@background, @fallback)[@result];

@result: if(@contrast-ratio-preferred >= #wcag[@aa-contrast],
@preferred,
Expand All @@ -34,12 +33,12 @@
// Contrast on steroids. This function may also modify the background colour
// in order to make a colour pass the contrast threshold, and it heavily
// favours the light colour over the dark colour because of situations such
// as navigation where
// as navigation where the background colour is not known.
.ultra-contrast(@background, @light, @dark) {
@target-contrast: #wcag[@aa-contrast];

@lighter-background: lighten(@background, 25%);
@darker-background: darken(@background, 15%);
@lighter-background: tint(@background, 40%);
@darker-background: screen(@background, darken(white, 30%));

@light-aa: boolean(#wcag.contrast-ratio(@background, @light)[@result] > @target-contrast);
@dark-aa: boolean(#wcag.contrast-ratio(@background, @dark)[@result] > @target-contrast);
Expand All @@ -57,7 +56,9 @@
{
@msg: "Dark colour passes AA";
@fg: @dark;
@bg: @background;
// @background would pass AA here but we've decided to go lighter for that extra boost,
// as AA black text just doesn't appear as contrasting in practice.
@bg: @lighter-background;
},
if(@enhanced-dark-aa,
{
Expand Down

0 comments on commit a182d05

Please sign in to comment.