Шаблон:Color contrast ratio

Документација шаблона[прикажи] [уреди] [историја] [освежи]

{{#ifeq:color contrast ratio |док

    | 

{{#ifeq:show |show

|

        }}{{#if: |
         |   {{#ifexist:Шаблон:Color contrast ratio
                  | [[Категорија:Документација {{#switch:Шаблон |Шаблон=шаблона |Модул=модула |Корисник=корисничких страница |#default=Википедије}}]]
                  | 
                 }}
        }}
    | 
   }}

This template returns the color contrast ratio between the two colors provided. It accepts two parameters, which can be a standard RGB hex color code (#RRGGBB) or a standard HTML color or CSS "orange" (= #FFA500). Color names and hex letters are case-insensitive (i.e. they may be upper- or lower-case).

Usage

Examples with light background

Text Color	Background color	Sample	Code	Contrast ratio	WCAG 2.0 conf.
#000000	#FFFFFF	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| #FFFFFF }} |{{ safesubst:#if:1| #FFFFFF }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| #FFFFFF }}]] }}	#FFFFFF }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:#000000|#000000| |#000000 }}{{#ifeq:#FFFFFF|#FFFFFF| |#FFFFFF }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 21 round3}}	AAA
#000080	#DDDDDD	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| #DDDDDD }} |{{ safesubst:#if:1| #DDDDDD }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| #DDDDDD }}]] }}	#DDDDDD }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:#000080|#000080| |#000080 }}{{#ifeq:#DDDDDD|#DDDDDD| |#DDDDDD }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 11.787049156119 round3}}	AAA
#7B0000	#FF9900	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| #FF9900 }} |{{ safesubst:#if:1| #FF9900 }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| #FF9900 }}]] }}	#FF9900 }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:#7B0000|#7B0000| |#7B0000 }}{{#ifeq:#FF9900|#FF9900| |#FF9900 }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 5.3243634686065 round3}}	AA
#004800	#AAAAAA	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| #AAAAAA }} |{{ safesubst:#if:1| #AAAAAA }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| #AAAAAA }}]] }}	#AAAAAA }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:#004800|#004800| |#004800 }}{{#ifeq:#AAAAAA|#AAAAAA| |#AAAAAA }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 4.6911309087802 round3}}	AA
red	white	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| white }} |{{ safesubst:#if:1| white }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| white }}]] }}	white }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:red|red| |red }}{{#ifeq:white|white| |white }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 3.998476770754 round3}}	Не
#FF0000	#FF9999	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| #FF9999 }} |{{ safesubst:#if:1| #FF9999 }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| #FF9999 }}]] }}	#FF9999 }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:#FF0000|#FF0000| |#FF0000 }}{{#ifeq:#FF9999|#FF9999| |#FF9999 }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 1.9551551146066 round3}}	Не

Examples with dark background

Text Color	Background color	Sample	Code	Contrast ratio	WCAG 2.0 conf.
#BADFEE	black	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| black }} |{{ safesubst:#if:1| black }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| black }}]] }}	black }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:#BaDFeE|#BaDFeE| |#BaDFeE }}{{#ifeq:BlAcK|BlAcK| |BlAcK }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 14.87750046677 round3}}	AAA
red	black	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| black }} |{{ safesubst:#if:1| black }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| black }}]] }}	black }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:red|red| |red }}{{#ifeq:black|black| |black }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 5.252 round3}}	AA
#FFFF00	#00FFFF	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1|   Sample   }}|{{ safesubst:#if:1|   Sample   }}]]	[[|{{ safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{ safesubst:#if:1| #00FFFF }} |{{ safesubst:#if:1| #00FFFF }}]]	[[ {{ safesubst:#if:1| }} |{{ safesubst:#if:1| #00FFFF }}]] }}	#00FFFF }} }} }}	{{{{#if:Color contrast ratio	Color contrast ratio | tlp|... }}{{#ifeq:#FFFF00|#FFFF00| |#FFFF00 }}{{#ifeq:#00FFFF|#00FFFF| |#00FFFF }}{{#ifeq:x	|{{{4}}} }}{{#ifeq:x	|{{{5}}} }}{{#ifeq:x	|{{{6}}} }}{{#ifeq:x	|{{{7}}} }}{{#ifeq:x	|{{{8}}} }}{{#ifeq:x	|{{{9}}} }}}}	{{#expr: 1.1676618103654 round3}}	Не

WCAG 2.0

As a guide to selecting foreground and background colors for text, the Web Content Accessibility Guidelines 2.0 (guideline 1.4) classifies contrast ratios for ordinary text as follows:

WCAG 2.0 text contrast ratios

Font size	Not Compliant	Level AA	Level AAA
Normal	< 4.5	4.5 to 7.0	> 7.0
Large (18 pt or 14 pt bold)	< 3.0	3.0 to 4.5	> 4.5

Normal wiki-text is rendered by common browsers at roughly 9.5 to 10.5 pt (12.5 to 14 px), depending on skin. Text would need to be about 180% or 140% bold to qualify as "Large" for WCAG purposes.

See also

• Template:Color contrast conformance
• Wikipedia:WikiProject Accessibility
• Colour Contrast Check
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• Index of Color Contrast Samples

{{#if:{{#ifeq:Color contrast ratio|sandbox|1}}||}}

Горња документација је укључена са странице Шаблон:Color contrast ratio/док. (уреди | историја)
Уредници могу да експериментишу на подстраницама песак (направи | дуплирај) и тест (направи) овог шаблона.
Категорије додајите на подстраницу /док. Подстранице овог шаблона.