color_contrast_calc 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.travis.yml +1 -0
- data/README.ja.md +35 -6
- data/README.md +39 -9
- data/color_contrast_calc.gemspec +1 -0
- data/examples/sort_colors.rb +6 -6
- data/examples/yellow_black_hex_contrast.rb +11 -0
- data/lib/color_contrast_calc/sorter.rb +11 -2
- data/lib/color_contrast_calc/version.rb +1 -1
- data/lib/color_contrast_calc.rb +25 -0
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c4b26adb4fda2262eea7f261682ab051b808f2a0
|
4
|
+
data.tar.gz: d021fedafd96acdf28e7b2e9e1757380546d8408
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 922f5d4c9914fd92473b135ddec0f92eab3c8b121acebbfecae1f489ce8e1f1ba693b3f37404b4e2198fccdf1144e049aa265dfd7cba32e977be5a20aaef5c8c
|
7
|
+
data.tar.gz: 29538d2de8d60496a1b800071311502710dc1b1d01a8e0c5746303db3c33da3836c66f092a1e391f86a10b6c33ea433508daeb0d5db612aa36a246a1e03c8bba
|
data/.travis.yml
CHANGED
data/README.ja.md
CHANGED
@@ -28,6 +28,10 @@ Or install it yourself as:
|
|
28
28
|
|
29
29
|
## 使い方
|
30
30
|
|
31
|
+
ここでは大まかな概要が分かるような例を挙げています。
|
32
|
+
|
33
|
+
詳細なドキュメントはhttp://www.rubydoc.info/gems/color_contrast_calc を見て下さい。
|
34
|
+
|
31
35
|
### 色の表現
|
32
36
|
|
33
37
|
ユーティリティ内で色を表わすクラスとしてColorContrastCalc::Color`
|
@@ -91,6 +95,31 @@ The contrast ratio between yellow and black is 19.5560
|
|
91
95
|
The contrast ratio between #ffff00 and #000000 is 19.5560
|
92
96
|
```
|
93
97
|
|
98
|
+
もしくは2色の16進数カラーコードあるいはRGB値からコントラスト比を計算することも可能です。
|
99
|
+
|
100
|
+
次のコードを `yellow_black_hex_contrast.rb`として保存し:
|
101
|
+
|
102
|
+
```ruby
|
103
|
+
require 'color_contrast_calc'
|
104
|
+
|
105
|
+
yellow, black = %w[#ff0 #000000]
|
106
|
+
# or
|
107
|
+
# yellow, black = [[255, 255, 0], [0, 0, 0]]
|
108
|
+
|
109
|
+
ratio = ColorContrastCalc::Checker.contrast_ratio(yellow, black)
|
110
|
+
level = ColorContrastCalc::Checker.ratio_to_level(ratio)
|
111
|
+
|
112
|
+
puts "Contrast ratio between yellow and black: #{ratio}"
|
113
|
+
puts "Contrast level: #{level}"
|
114
|
+
```
|
115
|
+
|
116
|
+
以下のように実行します:
|
117
|
+
|
118
|
+
```bash
|
119
|
+
Contrast ratio between yellow and black: 19.555999999999997
|
120
|
+
Contrast level: AAA
|
121
|
+
```
|
122
|
+
|
94
123
|
### 例2: ある色に対し十分なコントラスト比のある色を見つける
|
95
124
|
|
96
125
|
2色の組み合わせのうち、一方の色のbrightness/lightnessを変化させることで十分な
|
@@ -191,20 +220,20 @@ require 'color_contrast_calc'
|
|
191
220
|
color_names = ['red', 'yellow', 'lime', 'cyan', 'fuchsia', 'blue']
|
192
221
|
colors = color_names.map {|c| ColorContrastCalc.color_from(c) }
|
193
222
|
|
194
|
-
#
|
223
|
+
# Sort by hSL order. An uppercase for a component of color means
|
195
224
|
# that component should be sorted in descending order.
|
196
225
|
|
197
|
-
hsl_ordered = ColorContrastCalc
|
226
|
+
hsl_ordered = ColorContrastCalc.sort(colors, 'hSL')
|
198
227
|
puts("Colors sorted in the order of hSL: #{hsl_ordered.map(&:name)}")
|
199
228
|
|
200
|
-
#
|
229
|
+
# Sort by RGB order.
|
201
230
|
|
202
|
-
rgb_ordered = ColorContrastCalc
|
231
|
+
rgb_ordered = ColorContrastCalc.sort(colors, 'RGB')
|
203
232
|
puts("Colors sorted in the order of RGB: #{rgb_ordered.map(&:name)}")
|
204
233
|
|
205
234
|
# You can also change the precedence of components.
|
206
235
|
|
207
|
-
grb_ordered = ColorContrastCalc
|
236
|
+
grb_ordered = ColorContrastCalc.sort(colors, 'GRB')
|
208
237
|
puts("Colors sorted in the order of GRB: #{grb_ordered.map(&:name)}")
|
209
238
|
|
210
239
|
# And you can directly sort hex color codes.
|
@@ -212,7 +241,7 @@ puts("Colors sorted in the order of GRB: #{grb_ordered.map(&:name)}")
|
|
212
241
|
## Hex color codes that correspond to the color_names given above.
|
213
242
|
hex_codes = ['#ff0000', '#ff0', '#00ff00', '#0ff', '#f0f', '#0000FF']
|
214
243
|
|
215
|
-
hsl_ordered = ColorContrastCalc
|
244
|
+
hsl_ordered = ColorContrastCalc.sort(hex_codes, 'hSL')
|
216
245
|
puts("Colors sorted in the order of hSL: #{hsl_ordered}")
|
217
246
|
```
|
218
247
|
|
data/README.md
CHANGED
@@ -6,8 +6,8 @@ sufficient contrast, WCAG 2.0 in mind.
|
|
6
6
|
With this library, you can do following things:
|
7
7
|
|
8
8
|
* Check the contrast ratio between two colors
|
9
|
-
* Find (if exists) a color that has
|
10
|
-
* Create a new color from a given color by adjusting
|
9
|
+
* Find (if exists) a color that has sufficient contrast to a given color
|
10
|
+
* Create a new color from a given color by adjusting properties of the latter
|
11
11
|
* Sort colors
|
12
12
|
|
13
13
|
## Installation
|
@@ -20,7 +20,7 @@ gem 'color_contrast_calc'
|
|
20
20
|
|
21
21
|
And then execute:
|
22
22
|
|
23
|
-
$ bundle
|
23
|
+
$ bundle install
|
24
24
|
|
25
25
|
Or install it yourself as:
|
26
26
|
|
@@ -28,6 +28,10 @@ Or install it yourself as:
|
|
28
28
|
|
29
29
|
## Usage
|
30
30
|
|
31
|
+
Here are some examples that will give you a brief overview of the library.
|
32
|
+
|
33
|
+
The full documentation is available at http://www.rubydoc.info/gems/color_contrast_calc
|
34
|
+
|
31
35
|
### Representing a color
|
32
36
|
|
33
37
|
To represent a color, class `ColorContrastCalc::Color` is provided.
|
@@ -90,6 +94,32 @@ The contrast ratio between yellow and black is 19.5560
|
|
90
94
|
The contrast ratio between #ffff00 and #000000 is 19.5560
|
91
95
|
```
|
92
96
|
|
97
|
+
Or it is also possible to calculate the contrast ratio of two colors from
|
98
|
+
their hex color codes or RGB values.
|
99
|
+
|
100
|
+
Save the following code as `yellow_black_hex_contrast.rb`:
|
101
|
+
|
102
|
+
```ruby
|
103
|
+
require 'color_contrast_calc'
|
104
|
+
|
105
|
+
yellow, black = %w[#ff0 #000000]
|
106
|
+
# or
|
107
|
+
# yellow, black = [[255, 255, 0], [0, 0, 0]]
|
108
|
+
|
109
|
+
ratio = ColorContrastCalc::Checker.contrast_ratio(yellow, black)
|
110
|
+
level = ColorContrastCalc::Checker.ratio_to_level(ratio)
|
111
|
+
|
112
|
+
puts "Contrast ratio between yellow and black: #{ratio}"
|
113
|
+
puts "Contrast level: #{level}"
|
114
|
+
```
|
115
|
+
|
116
|
+
Then execute the script:
|
117
|
+
|
118
|
+
```bash
|
119
|
+
Contrast ratio between yellow and black: 19.555999999999997
|
120
|
+
Contrast level: AAA
|
121
|
+
```
|
122
|
+
|
93
123
|
### Example 2: Find colors that have enough contrast ratio with a given color
|
94
124
|
|
95
125
|
If you want to find a combination of colors with sufficient contrast
|
@@ -190,20 +220,20 @@ require 'color_contrast_calc'
|
|
190
220
|
color_names = ['red', 'yellow', 'lime', 'cyan', 'fuchsia', 'blue']
|
191
221
|
colors = color_names.map {|c| ColorContrastCalc.color_from(c) }
|
192
222
|
|
193
|
-
#
|
223
|
+
# Sort by hSL order. An uppercase for a component of color means
|
194
224
|
# that component should be sorted in descending order.
|
195
225
|
|
196
|
-
hsl_ordered = ColorContrastCalc
|
226
|
+
hsl_ordered = ColorContrastCalc.sort(colors, 'hSL')
|
197
227
|
puts("Colors sorted in the order of hSL: #{hsl_ordered.map(&:name)}")
|
198
228
|
|
199
|
-
#
|
229
|
+
# Sort by RGB order.
|
200
230
|
|
201
|
-
rgb_ordered = ColorContrastCalc
|
231
|
+
rgb_ordered = ColorContrastCalc.sort(colors, 'RGB')
|
202
232
|
puts("Colors sorted in the order of RGB: #{rgb_ordered.map(&:name)}")
|
203
233
|
|
204
234
|
# You can also change the precedence of components.
|
205
235
|
|
206
|
-
grb_ordered = ColorContrastCalc
|
236
|
+
grb_ordered = ColorContrastCalc.sort(colors, 'GRB')
|
207
237
|
puts("Colors sorted in the order of GRB: #{grb_ordered.map(&:name)}")
|
208
238
|
|
209
239
|
# And you can directly sort hex color codes.
|
@@ -211,7 +241,7 @@ puts("Colors sorted in the order of GRB: #{grb_ordered.map(&:name)}")
|
|
211
241
|
## Hex color codes that correspond to the color_names given above.
|
212
242
|
hex_codes = ['#ff0000', '#ff0', '#00ff00', '#0ff', '#f0f', '#0000FF']
|
213
243
|
|
214
|
-
hsl_ordered = ColorContrastCalc
|
244
|
+
hsl_ordered = ColorContrastCalc.sort(hex_codes, 'hSL')
|
215
245
|
puts("Colors sorted in the order of hSL: #{hsl_ordered}")
|
216
246
|
```
|
217
247
|
|
data/color_contrast_calc.gemspec
CHANGED
@@ -7,6 +7,7 @@ require 'color_contrast_calc/version'
|
|
7
7
|
Gem::Specification.new do |spec|
|
8
8
|
spec.name = 'color_contrast_calc'
|
9
9
|
spec.version = ColorContrastCalc::VERSION
|
10
|
+
spec.required_ruby_version = ">= 2.2"
|
10
11
|
spec.authors = ['HASHIMOTO, Naoki']
|
11
12
|
spec.email = ['hashimoto.naoki@gmail.com']
|
12
13
|
|
data/examples/sort_colors.rb
CHANGED
@@ -5,20 +5,20 @@ require 'color_contrast_calc'
|
|
5
5
|
color_names = ['red', 'yellow', 'lime', 'cyan', 'fuchsia', 'blue']
|
6
6
|
colors = color_names.map {|c| ColorContrastCalc.color_from(c) }
|
7
7
|
|
8
|
-
#
|
8
|
+
# Sort by hSL order. An uppercase for a component of color means
|
9
9
|
# that component should be sorted in descending order.
|
10
10
|
|
11
|
-
hsl_ordered = ColorContrastCalc
|
11
|
+
hsl_ordered = ColorContrastCalc.sort(colors, 'hSL')
|
12
12
|
puts("Colors sorted in the order of hSL: #{hsl_ordered.map(&:name)}")
|
13
13
|
|
14
|
-
#
|
14
|
+
# Sort by RGB order.
|
15
15
|
|
16
|
-
rgb_ordered = ColorContrastCalc
|
16
|
+
rgb_ordered = ColorContrastCalc.sort(colors, 'RGB')
|
17
17
|
puts("Colors sorted in the order of RGB: #{rgb_ordered.map(&:name)}")
|
18
18
|
|
19
19
|
# You can also change the precedence of components.
|
20
20
|
|
21
|
-
grb_ordered = ColorContrastCalc
|
21
|
+
grb_ordered = ColorContrastCalc.sort(colors, 'GRB')
|
22
22
|
puts("Colors sorted in the order of GRB: #{grb_ordered.map(&:name)}")
|
23
23
|
|
24
24
|
# And you can directly sort hex color codes.
|
@@ -26,5 +26,5 @@ puts("Colors sorted in the order of GRB: #{grb_ordered.map(&:name)}")
|
|
26
26
|
## Hex color codes that correspond to the color_names given above.
|
27
27
|
hex_codes = ['#ff0000', '#ff0', '#00ff00', '#0ff', '#f0f', '#0000FF']
|
28
28
|
|
29
|
-
hsl_ordered = ColorContrastCalc
|
29
|
+
hsl_ordered = ColorContrastCalc.sort(hex_codes, 'hSL')
|
30
30
|
puts("Colors sorted in the order of hSL: #{hsl_ordered}")
|
@@ -0,0 +1,11 @@
|
|
1
|
+
require 'color_contrast_calc'
|
2
|
+
|
3
|
+
yellow, black = %w[#ff0 #000000]
|
4
|
+
# or
|
5
|
+
# yellow, black = [[255, 255, 0], [0, 0, 0]]
|
6
|
+
|
7
|
+
ratio = ColorContrastCalc::Checker.contrast_ratio(yellow, black)
|
8
|
+
level = ColorContrastCalc::Checker.ratio_to_level(ratio)
|
9
|
+
|
10
|
+
puts "Contrast ratio between yellow and black: #{ratio}"
|
11
|
+
puts "Contrast level: #{level}"
|
@@ -87,9 +87,13 @@ module ColorContrastCalc
|
|
87
87
|
# @param color_order [String] String such as "HSL", "RGB" or "lsH"
|
88
88
|
# @param key_mapper [Proc, nil] Proc object used to retrive key values
|
89
89
|
# from items to be sorted
|
90
|
+
# @param key_mapper_block [Proc] Block that is used instead of key_mapper
|
91
|
+
# when the latter is not given
|
90
92
|
# @return [Array<Color>, Array<String>] Array of of sorted colors
|
91
93
|
|
92
|
-
def self.sort(colors, color_order = 'hSL',
|
94
|
+
def self.sort(colors, color_order = 'hSL',
|
95
|
+
key_mapper = nil, &key_mapper_block)
|
96
|
+
key_mapper = key_mapper_block if !key_mapper && key_mapper_block
|
93
97
|
key_type = KeyTypes.guess(colors[0], key_mapper)
|
94
98
|
compare = compile_compare_function(color_order, key_type, key_mapper)
|
95
99
|
|
@@ -103,9 +107,14 @@ module ColorContrastCalc
|
|
103
107
|
# @param key_type [Symbol] +:color+, +:components+ or +:hex+
|
104
108
|
# @param key_mapper [Proc, nil] Proc object to be used to retrive
|
105
109
|
# key values from items to be sorted.
|
110
|
+
# @param key_mapper_block [Proc] Block that is used instead of
|
111
|
+
# key_mapper when the latter is not given
|
106
112
|
# @return [Proc] Proc object to be passed to Array#sort()
|
107
113
|
|
108
|
-
def self.compile_compare_function(color_order, key_type,
|
114
|
+
def self.compile_compare_function(color_order, key_type,
|
115
|
+
key_mapper = nil, &key_mapper_block)
|
116
|
+
key_mapper = key_mapper_block if !key_mapper && key_mapper_block
|
117
|
+
|
109
118
|
case key_type
|
110
119
|
when KeyTypes::COLOR
|
111
120
|
compare = compile_color_compare_function(color_order)
|
data/lib/color_contrast_calc.rb
CHANGED
@@ -38,6 +38,31 @@ module ColorContrastCalc
|
|
38
38
|
color_from_str(color_value, name)
|
39
39
|
end
|
40
40
|
|
41
|
+
##
|
42
|
+
# Sort colors in the order specified by +color_order+.
|
43
|
+
#
|
44
|
+
# Sort colors given as a list or tuple of Color instances or hex
|
45
|
+
# color codes. (alias of Sorter.sort())
|
46
|
+
#
|
47
|
+
# You can specify sorting order by giving a +color_order+ tring, such
|
48
|
+
# as "HSL" or "RGB". A component of +color_order+ on the left side
|
49
|
+
# has a higher sorting precedence, and an uppercase letter means
|
50
|
+
# descending order.
|
51
|
+
# @param colors [Array<Color>, Array<String>] Array of Color instances
|
52
|
+
# or items from which color hex codes can be retrieved.
|
53
|
+
# @param color_order [String] String such as "HSL", "RGB" or "lsH"
|
54
|
+
# @param key_mapper [Proc, nil] Proc object used to retrive key values
|
55
|
+
# from items to be sorted
|
56
|
+
# @param key_mapper_block [Proc] Block that is used instead of key_mapper
|
57
|
+
# when the latter is not given
|
58
|
+
# @return [Array<Color>, Array<String>] Array of of sorted colors
|
59
|
+
|
60
|
+
def self.sort(colors, color_order = 'hSL',
|
61
|
+
key_mapper = nil, &key_mapper_block)
|
62
|
+
key_mapper = key_mapper_block if !key_mapper && key_mapper_block
|
63
|
+
Sorter.sort(colors, color_order, key_mapper)
|
64
|
+
end
|
65
|
+
|
41
66
|
##
|
42
67
|
# Return an array of named colors.
|
43
68
|
#
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: color_contrast_calc
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- HASHIMOTO, Naoki
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2018-01-06 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -106,6 +106,7 @@ files:
|
|
106
106
|
- examples/grayscale.rb
|
107
107
|
- examples/sort_colors.rb
|
108
108
|
- examples/yellow_black_contrast.rb
|
109
|
+
- examples/yellow_black_hex_contrast.rb
|
109
110
|
- examples/yellow_orange_contrast.rb
|
110
111
|
- exe/color_contrast_calc
|
111
112
|
- lib/color_contrast_calc.rb
|
@@ -130,7 +131,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
130
131
|
requirements:
|
131
132
|
- - ">="
|
132
133
|
- !ruby/object:Gem::Version
|
133
|
-
version: '
|
134
|
+
version: '2.2'
|
134
135
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
135
136
|
requirements:
|
136
137
|
- - ">="
|