colourtextcontrast
pink face
compare grey squares
stripes 1
neon effects
contrasts 2
  • 1
  • 2
  • 1
  • 1

Simultanious contrast I

Coloured edges clashing

example 1

drag the red letter 'A' around the colour squares
and look at the effects at it's edges

example 2

click top colour squares to change textcolour
click bottom colour squares to change colour
behind the text colour

example 3

watch the gradient effect and colour differences at the edges when the rectangles are closer together

effect

  • the edges of the letter look smooth against some colours and sharp blocks against others
  • against some colours there seem to be all kinds of coloured edges between the letter and the background
  • this sometimes seem to produce a 3D-effect
  • even on the edges between any two squares you can watch this effect
  • even one-coloured areas get different shades or gradients depending on the neighbouring coloured areas
  • those effects vary in intensity depending on area sizes, shapes, colour hue, brightness and luminosity

explanation

  • the eye's colour sensitive cones are activated by the colour fields and get used to them quickly and such are relaxing a bit, means: getting fatigue
  • plus: the stronger the activation of one cone the stronger his inhibition on neighboured cones
  • when two colours clash there is always the effect "simultanious contrast", sometimes less, sometimes more obvious
  • plus: where two colours meet different neighboured sensitive are activated and as the eye (or your head/body) is not absolutely in the same position the sensitive cones for one colour are suddenly over the other coloured area and are activated freshly and respond stronger so the difference, and the inhibiting effect on the neighbouring cones is restronged again as well
  • the more complementary two colours are (= the more opposite their positions are on the colour wheel) the more irritating this effects seems to be (complementary contrast)
  • and the effect is more obvious with brighter colours (like on a screen)

advice

  • so you think: but I never would use so many and intense colours, so this is not important to me...
  • but it is because the effects are there: all elements and colours influence eachother - at all colours at all text sizes, in every graphic, every photograph, - maybe not that obvious but still influencing the visitor's eye and brain and if he will feel comfortable or irritated at a page
  • try to be objective when judging about colours though responses to colours are usually a very subjective subversive thing. You should be able to judge about the whole colour concept and not only say: I want this blue because I like it. Every favourite colour can look ugly in the wrong context!
  • such in mind choose your colours carefully
  • try combinations you think will not look good - maybe they will!
  • even if you vary colours only slightly, test them again
  • especially test them at least once on different displays as Laptops, older and newer screens, screens of different brands and prices, can differ surprisingly awful sometimes - for a workaround at lack of access to many display, vary the gamma and/or further settings of your monitor
SOON
SOON
SOON