WPF › Skinning › ColorContrast

ColorContrast

class.NET 6 / 8 / 10.NET Framework 4.8Binarymission.WPF.Skinning

Measures how well one colour reads on another, and moves a colour just far enough to read – the arithmetic the built-in skins are made with, for a skin or a control of your own.

public static class ColorContrast

Remarks

Ratios run from 1 (the same colour) to 21 (black on white), measured as the Web Content Accessibility Guidelines measure them. The guidelines ask for TextRatio (4.5) for text and GraphicRatio (3) for glyphs, lines and large text. Transparency is ignored: each colour is measured as if it were opaque.

Examples

Color badge = Color.FromRgb(0xFF, 0xC8, 0x3D);                  // a bright yellow
Color text = ColorContrast.ReadableTextOn(badge);              // near-black: white would not read
Color link = ColorContrast.EnsureRatio(skin[BinarySkinColor.Accent], skin[BinarySkinColor.Surface],
                                       ColorContrast.TextRatio);
bool readable = ColorContrast.Ratio(link, skin[BinarySkinColor.Surface]) >= ColorContrast.TextRatio;   // true

Members at a glance

Methods
`EnsureRatio`	Makes a colour darker or lighter only as far as it takes to reach a contrast ratio on a background – darker on a light background, lighter on a dark one.
`EnsureRatio`	Moves a colour towards another only as far as it takes to reach a contrast ratio on a background.
`IsDark`	Determines whether white text reads better on a colour than dark text does – that is, whether the colour is a dark one.
`Mix`	Mixes two colours, as opaque colours.
`Ratio`	Measures the contrast ratio between two colours. The order of the two does not matter.
`ReadableTextOn`	Chooses white or near-black (`#242424`), whichever reads better on a colour.
`RelativeLuminance`	Measures how light a colour looks to the eye.
Fields
`GraphicRatio`	The contrast ratio the guidelines ask for between a glyph, a line or large text and the colour behind it: 3.
`TextRatio`	The contrast ratio the guidelines ask for between text and the colour behind it: 4.5.

Methods

EnsureRatio static

public static Color EnsureRatio(Color foreground, Color background, double ratio)

Makes a colour darker or lighter only as far as it takes to reach a contrast ratio on a background – darker on a light background, lighter on a dark one.

Parameters

foreground: The colour wanted.
background: The colour it is drawn on.
ratio: The contrast it must reach, such as TextRatio.

Returns

foreground itself when it already reads; otherwise the nearest colour on the way to black or white that does, in steps of five per cent.

EnsureRatio static

public static Color EnsureRatio(Color foreground, Color background, double ratio, Color towards)

Moves a colour towards another only as far as it takes to reach a contrast ratio on a background.

Parameters

foreground: The colour wanted.
background: The colour it is drawn on.
ratio: The contrast it must reach.
towards: The colour to move towards.

Returns

The first colour, in steps of five per cent of the way, that reaches the ratio; or towards itself when nothing short of it does.

IsDark static

public static bool IsDark(Color background)

Determines whether white text reads better on a colour than dark text does – that is, whether the colour is a dark one.

Parameters

background: The colour.

Returns

true for a dark colour.

Mix static

public static Color Mix(Color first, Color second, double amount)

Mixes two colours, as opaque colours.

Parameters

first: The first colour.
second: The second colour.
amount: How much of the second: 0 gives the first, 1 the second. Values outside 0 to 1 are held to the nearer end.

Returns

The mix, opaque.

Ratio static

public static double Ratio(Color first, Color second)

Measures the contrast ratio between two colours. The order of the two does not matter.

Parameters

first: One colour.
second: The other.

Returns

The ratio, from 1 (no contrast) to 21 (black on white).

ReadableTextOn static

public static Color ReadableTextOn(Color background)

Chooses white or near-black (#242424), whichever reads better on a colour.

Parameters

background: The colour the text is drawn on.

Returns

The text colour.

RelativeLuminance static

public static double RelativeLuminance(Color color)

Measures how light a colour looks to the eye.

Parameters

color: The colour; its alpha is ignored.

Returns

Its relative luminance, from 0 (black) to 1 (white).

Fields

GraphicRatio

public const double GraphicRatio

The contrast ratio the guidelines ask for between a glyph, a line or large text and the colour behind it: 3.

TextRatio

public const double TextRatio

The contrast ratio the guidelines ask for between text and the colour behind it: 4.5.