COLOR SYSTEM · COMPARISONS
Colour comparisons
Each pair shows a reference approach first and an approach that needs work second, with the reason. When comparing, start from what the element is for, then check text–background contrast, status labels and the real interaction feedback.
① Buttons: accent colour and hover feedback on white
The buttons use the site’s existing accent red and darken within the same hue on hover. Check the contrast between button text and background before use.
These buttons turn orange on hover. Unless the page gives that change a meaning, it makes the state harder to read. The brand red itself is not ruled out in every context.
③ Cards: text colours on a dark background
On the dark background, body text, secondary text and the accent all use light colours. Check the actual text sizes and background pairs before use.
The light theme’s secondary text colour is reused on a dark background and may not meet contrast for small text; pick colours for the dark theme separately.
④ Badges: dark text on a light tint
A light background with dark text gives a clear hierarchy. The colours here are an example pairing, not steps from a full brand scale.
Small white text on brand red needs its contrast measured; white text is not acceptable just because it is common.
⑤ Status messages: name the state as well as colouring it
Each state is written out and paired with a symbol. Even when the colours are hard to tell apart, the text still explains the result.
Each of these white-on-colour pairs has to be measured; a bright background is no substitute for checking that the text is readable.
⑥ Motion: hover and press feedback
Hover feedback should help confirm what is interactive. It stays short, and everything still works with reduced motion.
Continuous flashing interrupts reading. This counter-example is kept static; the loop is not actually played.
⑦ Decoration: solid surfaces versus gradients
Solid surfaces and thin dividers match the site’s existing style and keep body text and headings easy to tell apart.
Decorative gradients and warm backgrounds depart from the site’s design conventions. This describes a difference in project style, not a verdict on every design.
⑧ Charts: do not rely on colour alone
Categories and values are labelled as well as coloured. Blue, orange and gold are only a starting point; still check greyscale and colour-vision simulations in real use.
A red–green pair can be hard to tell apart. This example already has text labels, so it is not fully unreadable, but the colour separation and, where needed, line styles should still be improved.
⑨ Forms: focus and error messages
A focus outline helps keyboard users find their place; the error message states the problem and is linked to its input.
Repeating the value “123” does not explain what is wrong. State the expected format and link the message to the input.
⑩ Links: recognisable, with feedback
The link text says where it goes and the underline makes it recognisable; hover and keyboard focus should also give clear feedback.
In body text, colour alone may not be enough to identify a link. Without an underline, use another clear cue and check the focus and hover states.
These are design comparisons; they do not mean a whole page has passed an accessibility audit. Decide what an element is for first, then check text–background contrast, labels and the real interaction states.