Pang-bô͘:Greater color contrast ratio
跳至導覽
跳至搜尋
Pang-bô͘ bûn-su[chhâ-khòaⁿ] [pian-chi̍p] [le̍k-sú] [kun-sin]
本 枋模予人使用佇 approximately 63,000 抑 頂面,所以伊的改變會受著大範圍的注意。請佇界變進前先佇 馮摹的 /sandbox 抑 /testcases 次頁面試驗,或者是佇你家己的 用者取頁面.請佇實行改變進曾考慮先 佇 土論頁 參詳一咧。 |
Sú-iōng Lua thêng-sek: |
This template determines the pair of colors with the larger contrast ratio: color1/color2 or color1/color3. This is useful for selecting a foreground/background color pair. For accessibility, WCAG 2.0 AA guidelines require a contrast ratio of 3 or larger for large text, and 4.5 or larger for normal sized text.
In the default mode, color2 and color3 are white and black, and the selected color pair will always have a contrast ratio greater than 4.58.
Parameters[修改]
A color input can be by name ("khaki") or hextriplet with/without #-prefix ("#F0E68C", "F0E68C")
|1=
(required): background color|2=
first fontcolor. Optional, default = white (#FFFFFF)|3=
second fontcolor. Optional, default = black (#000000)
- The template returns the fontcolor with the greatest contrast
- background is Khaki (#F0E68C): {{Greater color contrast ratio|khaki|white|black}} → black
- background is RoyalBlue (#4169E1): {{Greater color contrast ratio|#4169E1|FFFFFF|000000}} → FFFFFF (=white)
- css text
|css=y
makes the template return css-ready text:
- Khaki (#F0E68C):
{{Greater color contrast ratio|khaki|white|black|css=y}}
- → background-color:khaki; color:black;
- Khaki (#F0E68C):
- Example 1, Khaki (#F0E68C)
<span style="font-size:110%; {{Greater color contrast ratio|khaki|white|black|css=y}}">Example text on khaki background.</span>
- →
<span style="font-size:110%; background-color:khaki; color:black;">Example text on khaki background.</span>
- → Example text on khaki background.
- Example 2, #4169E1 (RoyalBlue)
<span style="font-size:110%; {{Greater color contrast ratio|#4169E1|#ffffff|#000000|css=y}}">Example text on #4169E1 background.</span>
- →
<span style="font-size:110%; background-color:#4169E1; color:#ffffff;">Example text on #4169E1 background.</span>
- → Example text on #4169E1 background.
- bias
|bias=number
: reduces contrast-check. A bias of 1.25, reduces the possible minimum to 4.0, which may not meet accessibility standards.
- This parameter should be used with caution to ensure accessibility. As stated above, when used without a bias, and with color2 and color3 equal to white and black, the selected color pair will always have a contrast ratio greater than 4.58.
Examples[修改]
- Navy
<span style="background:navy; color:{{Greater color contrast ratio|navy|white|black}}">Navy</span>
→ Navy<span style="{{Greater color contrast ratio|navy|white|black|css=y}}">Navy</span>
→ Navy<span style="{{Greater color contrast ratio|navy|css=y}}">Navy</span>
→ Navy
- Red
<span style="background:red; color:{{Greater color contrast ratio|red|white|black}}">Red</span>
→ Red<span style="{{Greater color contrast ratio|red|white|black|css=y}}">Red</span>
→ Red<span style="{{Greater color contrast ratio|red|css=y}}">Red</span>
→ Red
- White
<span style="background:white; color:{{Greater color contrast ratio|white|white|black}}">White</span>
→ White<span style="{{Greater color contrast ratio|white|white|black|css=y}}">White</span>
→ White
- Black
<span style="background:black; color:{{Greater color contrast ratio|black|white|black}}">Black</span>
→ Black<span style="{{Greater color contrast ratio|black|white|black|css=y}}">Black</span>
→ Black
- #005500
<span style="background:#005500; color:{{Greater color contrast ratio|#005500|#FFFFFF|#000000}}">#005500</span>
→ #005500<span style="{{Greater color contrast ratio|#005500|#FFFFFF|#000000|css=y}}">#005500</span>
→ #005500<span style="background:#005500; color:#{{Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span>
→ 005500<span style="{{Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span>
→ 005500
- CC5500
<span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000}}">CC5500</span>
→ CC5500<span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|css=y}}">CC5500</span>
→ CC5500
- CC5500,
|bias=1
<span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1}}">CC5500</span>
→ CC5500<span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1|css=y}}">CC5500</span>
→ CC5500
- error
<span style="background:Not a color; color:#{{Greater color contrast ratio|Not a color|FFFFFF|000000}}">Not a color</span>
→ Not a color<span style="{{Greater color contrast ratio|Not a color|FFFFFF|000000|css=y}}">Not a color</span>
→ Not a color
- (returns
background-color:Not a color; color:;
, and so no color is set; defaults to black-on-white.)
- (returns
<span style="{{Greater color contrast ratio|Navy|Not a color|000000|css=y}}">Not a color</span>
→ Not a color
- (returns
background-color:Navy; color:;
, and so no fontcolor is set; defaults to black. The template did not function.)
- (returns
See also[修改]
Téng-bīn ê bûn-kiāⁿ sī tùi Pang-bô͘:Greater color contrast ratio/doc khàm-ji̍p--ê. (pian-chi̍p | le̍k-sú) Pian-chip-chiá ē-sái tī chit-ê pang-bô͘ ê soa-a̍p (chhòng-kiàn | mirror) kap chhì-giām-kheh-suh (chhòng-kiàn) ia̍h-bīn chò si̍t-giām. Chhiáⁿ tī chú-ia̍h-bīn /doc lāi-bīn ka-thiam lūi-pia̍t. Pún pang-bô͘ ê chú-ia̍h-bīn. |