What colour contrast must my website have?

Regular text requires 4.5:1, large text 3:1

For most text on a website, there is a minimum contrast ratio of 4.5 to 1 between text colour and background colour. For large text — from roughly 18 point onwards, or from 14 point for bold text — a ratio of 3 to 1 is sufficient. The same minimum of 3 to 1 also applies to parts of the user interface, such as the border of an input field or a button, and to graphical elements that are necessary to understand something, such as an icon without a caption.

Not everything falls under this requirement. Text in a logo, text that is purely decorative and carries no meaning, and text that happens to appear in a photograph without function are exempt. A user interface control that is disabled — a greyed-out button that cannot be clicked at that moment — does not need to meet the standard. An automated scan is good at measuring contrast ratios and checking them against the standard, but assessing these exceptions — is this icon decorative, does this text belong to a logo — requires a human eye, and that is precisely the part that a scan does not cover.

This is set out in WCAG 2.1, success criteria 1.4.3 and 1.4.11

These requirements come directly from WCAG 2.1, the assessment framework that EN 301 549 amounts to in practice. Success criterion 1.4.3, Contrast (Minimum), sets the threshold of 4.5 to 1 for regular text and 3 to 1 for large text. Success criterion 1.4.11, Contrast of Non-Text Content, sets the same minimum of 3 to 1 for parts of the user interface and for graphical objects that are necessary to understand their function. Both criteria fall under level AA, the level that the directive requires.