Class | Color::Palette::MonoContrast |
In: |
lib/color/palette/monocontrast.rb
|
Parent: | Object |
Generates a monochromatic constrasting colour palette for background and foreground. What does this mean?
Monochromatic: A single colour is used to generate the base palette, and this colour is lightened five times and darkened five times to provide eleven distinct colours.
Contrasting: The foreground is also generated as a monochromatic colour palettte; however, all generated colours are tested to see that they are appropriately contrasting to ensure maximum readability of the foreground against the background.
DEFAULT_MINIMUM_BRIGHTNESS_DIFF | = | (125.0 / 255.0) |
DEFAULT_MINIMUM_COLOR_DIFF | = | (500.0 / 255.0) |
background | [R] |
Hash of CSS background colour values.
This is always 11 values:
|
||||||
foreground | [R] |
Hash of CSS foreground colour values.
This is always 11 values:
|
||||||
minimum_brightness_diff | [RW] | The minimum brightness difference between the background and the foreground, and must be between 0..1. Setting this value will regenerate the palette based on the base colours. The default value for this is 125 / 255.0. If this value is set to nil, it will be restored to the default. | ||||||
minimum_color_diff | [RW] | The minimum colour difference between the background and the foreground, and must be between 0..3. Setting this value will regenerate the palette based on the base colours. The default value for this is 500 / 255.0. |
Generate the initial palette.
# File lib/color/palette/monocontrast.rb, line 88 88: def initialize(background, foreground = nil) 89: @minimum_brightness_diff = DEFAULT_MINIMUM_BRIGHTNESS_DIFF 90: @minimum_color_diff = DEFAULT_MINIMUM_COLOR_DIFF 91: 92: regenerate(background, foreground) 93: end
Returns the absolute difference between the brightness levels of two colours. This will be a decimal value between 0 and 1. W3C accessibility guidelines for colour contrast suggest that this value be at least approximately 0.49 (125 / 255.0) for proper contrast.
# File lib/color/palette/monocontrast.rb, line 166 166: def brightness_diff(c1, c2) 167: (c1.brightness - c2.brightness).abs 168: end
Given a background colour and a foreground colour, modifies the foreground colour so that it will have enough contrast to be seen against the background colour.
Uses mininum_brightness_diff and minimum_color_diff.
# File lib/color/palette/monocontrast.rb, line 134 134: def calculate_foreground(background, foreground) 135: nfg = nil 136: # Loop through brighter and darker versions of the foreground color. 137: # The numbers here represent the amount of foreground color to mix 138: # with black and white. 139: [100, 75, 50, 25, 0].each do |percent| 140: dfg = foreground.darken_by(percent) 141: lfg = foreground.lighten_by(percent) 142: 143: dbd = brightness_diff(background, dfg) 144: lbd = brightness_diff(background, lfg) 145: 146: if lbd > dbd 147: nfg = lfg 148: nbd = lbd 149: else 150: nfg = dfg 151: nbd = dbd 152: end 153: 154: ncd = color_diff(background, nfg) 155: 156: break if nbd >= @minimum_brightness_diff and ncd >= @minimum_color_diff 157: end 158: nfg 159: end
Returns the contrast between to colours, a decimal value between 0 and
contrast suggest that this value be at least approximately 1.96 (500 / 255.0) for proper contrast.
# File lib/color/palette/monocontrast.rb, line 174 174: def color_diff(c1, c2) 175: r = (c1.r - c2.r).abs 176: g = (c1.g - c2.g).abs 177: b = (c1.b - c2.b).abs 178: r + g + b 179: end
# File lib/color/palette/monocontrast.rb, line 74 74: def minimum_color_diff=(cd) #:noco: 75: if cd.nil? 76: @minimum_color_diff = DEFAULT_MINIMUM_COLOR_DIFF 77: elsif cd > 3.0 78: @minimum_color_diff = 3.0 79: elsif cd < 0.0 80: @minimum_color_diff = 0.0 81: else 82: @minimum_color_diff = cd 83: end 84: regenerate(@background[0], @foreground[0]) 85: end
Generate the colour palettes.
# File lib/color/palette/monocontrast.rb, line 96 96: def regenerate(background, foreground = nil) 97: foreground ||= background 98: background = background.to_rgb 99: foreground = foreground.to_rgb 100: 101: @background = {} 102: @foreground = {} 103: 104: @background[-5] = background.darken_by(10) 105: @background[-4] = background.darken_by(25) 106: @background[-3] = background.darken_by(50) 107: @background[-2] = background.darken_by(75) 108: @background[-1] = background.darken_by(85) 109: @background[ 0] = background 110: @background[+1] = background.lighten_by(85) 111: @background[+2] = background.lighten_by(75) 112: @background[+3] = background.lighten_by(50) 113: @background[+4] = background.lighten_by(25) 114: @background[+5] = background.lighten_by(10) 115: 116: @foreground[-5] = calculate_foreground(@background[-5], foreground) 117: @foreground[-4] = calculate_foreground(@background[-4], foreground) 118: @foreground[-3] = calculate_foreground(@background[-3], foreground) 119: @foreground[-2] = calculate_foreground(@background[-2], foreground) 120: @foreground[-1] = calculate_foreground(@background[-1], foreground) 121: @foreground[ 0] = calculate_foreground(@background[ 0], foreground) 122: @foreground[+1] = calculate_foreground(@background[+1], foreground) 123: @foreground[+2] = calculate_foreground(@background[+2], foreground) 124: @foreground[+3] = calculate_foreground(@background[+3], foreground) 125: @foreground[+4] = calculate_foreground(@background[+4], foreground) 126: @foreground[+5] = calculate_foreground(@background[+5], foreground) 127: end