Determine colour visibility

Posted by Han Solo | Posted in Design Force | Posted on 29-11-2008

色彩對比分析: 如果兩個顏色的明亮度差異以及色彩差異都大於某個程度的話,這兩個顏色就被視為能提供良好的色彩可見性。 Two colours provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range.

根據全球資訊網協會 World Wide Web Consortium (W3C) 所建議的演算法

色彩明亮度公式計算

    Colour brightness is determined by the following formula:

    ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
    Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a colour.

    ((紅色值 X 299) + (綠色值 X 587) + (藍色值 X 114)) / 1000 背景色明亮度與前景色明亮度的差異應大於 125.
    註: 這個演算法係由轉換 RGB (Red Green Blue) 值為 YIQ (Y=Luminance. I=Red-Y, Q=Blue-Y) 值的公式中所取得. 這個明亮度值得出色彩的知覺明度.

色彩差異公式計算

    Colour difference is determined by the following formula:

    (maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))

    ((紅色值 1, 紅色值 2) 的最大值 – (紅色值 1, 紅色值 2) 的最小值 ) + ((綠色值 1, 綠色值 2) 的最大值 – (綠色值 1, 綠色值 2) 的最小值 ) + ((藍色值 1, 藍色值 2) 的最大值 – (藍色值 1, 藍色值 2) 的最小值 ) 背景色與前景色的色彩差異應大於 500.

The rage for colour brightness difference is 125. The range for colour difference is 500.
由 W3C 所建議的亮度差異應大於 125, 而色彩差異則應大於 500.

CSS Evaluation:

    * Elements:
    o BODY bgcolor | text | alink | link | vlink | background =anything OR
    o TABLE bordercolor | bgcolor =anything OR
    o TD | TH bgcolor =anything OR
    o HR color =anything OR
    o any_element style=”any_color_specification”
    o STYLE “any_color_specification”… STYLE
    o Where any_color_specification is defined as any CSS specification which contains:

    color | background-color | background-image | background

    * Requirement: Determine color visibility.