What is Contrast Finder?
\ -Contrast-Finder is a tool which computes the contrast between \ +info.about.title=What is Contrast Finder? +info.about=
\ + Contrast-Finder is a tool which computes the contrast between \ two colors (background, foreground) and checks if the contrast is valid. \ When the contrast is not valid, the main target is to suggest some correct colors contrasts. \
\Contrast-Finder is designed to be used by webdesigners, web developers \ or web accessibility professionals to improve the readability of HTML pages and websites. \ -
\ -Help / How to use this tool?
\ -The Contrast-Finder interface is a form with five mandatory fields.
\ + +info.feedback.title=User Feedback +info.feedback=\ + If you have any problems with or questions about Contrast-Finder, please contact us: \ +
\ +- \
+
- Asqatasun forum \ +
- Twitter @Contrast_Finder \ +
- Contrast-Finder on Github \ +
\
+ All contributions are warmly welcome ! \
+ Translation, correction, bug report, new feature…
\
+ Feel free to play with \
+ source code, \
+ or discuss in the forum. \
+
The Contrast-Finder interface is a form with five mandatory fields.
\- \
- Text color \
- Background color \
- Minimum ratio \
- Color to edit \
- Gimme \ -
Text color / Foreground
\ -\ + +help.txt-color.title=Text color / Foreground +help.txt-color=
\ This is the color of the text. \ You can fill in this field with color keyword, an hexadecimal value, \ or an RGB value. \ @@ -107,17 +130,42 @@ home.noResultTxt=
What is Contrast FinderFFF or FFFFFF works perfectly. \
\
Color with RGB values
\
- Example: rgb(255,255,255).
\
+
Example: rgb(255,255,255).
\
You can also use a short syntax like 255,255,255, \
which be interpreted as rgb(255,255,255). \
-
\
-Background color
\
- \
+
+help.bg-color.title=Background color
+help.bg-color= \
This is the color of the background.
\
This field works just like the text color field.\
-
\
-Minimum ratio
\
- Three possible values 3, 4.5 and 7.
\
+
+help.color-to-edit.title=Color to edit
+help.color-to-edit= It is either the text or background color. Default is text color.
\
+ The color you choose will be modified until we find a valid color. \
+ The other color won't change.
+help.algo.title=Gimme / The algorithms
+help.algo=“Valid colors and very close to initial color”
\
+ \
+ This is the default algorithm. \
+ It offers color options really close to the initial color. \
+ (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \
+
\
+ \
+ For some color combinations, the algorithm may not give any result ; \
+ in such a case, use the other algorithm.\
+
\
+“A range of valid colors”
\
+ \
+ This is the backup algorithm, in case the first one gives no result. \
+ Nevertheless, color options may be (strongly) different from the initial color. \
+
+help.ratio.title=Minimum ratio
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio= Three possible values 3, 4.5 and 7.
\
How to choose a ratio? It depends on the following elements:
\
\
- Level of accessibility wanted: AA or AAA.
\
@@ -127,10 +175,10 @@ home.noResultTxt=What is Contrast Finder Level AA \
Two elements (size and bold) gives four combinations:
\
\
- - Text not bold + text size <
18px: ratio = 4.5 \
- - Text not bold + text size >
18px: ratio = 3 \
- - Text bold + text size <
14px: ratio = 4.5 \
- - Text bold + text size >
14px: ratio = 3 \
+ - Text not bold + text size <
24px: ratio = 4.5 \
+ - Text not bold + text size >
24px: ratio = 3 \
+ - Text bold + text size <
19px: ratio = 4.5 \
+ - Text bold + text size >
19px: ratio = 3 \
\
Level AAA
\
For level AAA the logic is the same, only the ratio increases in the the following way:
\
@@ -140,59 +188,26 @@ home.noResultTxt=What is Contrast Finder \
Text size understanding
\
\
- - The
14px criteria can be understood as equivalent \
+ - The
19px criteria can be understood as equivalent \
of 14pt or 120% or 1.2em. \
- - The
18px criteria can be understood as equivalent \
+ - The
24px criteria can be understood as equivalent \
of 18pt or 150% or 1.5em. \
\
For a full and exhaustive understanding of how to interpret text size, one should read the \
defintion of large-scale text from WCAG.
\
All details about the contrast ratio
\
\
- - WCAG 2.0 success criteria 1.4.3 (Level AA)
\
- - WCAG 2.0 success criteria 1.4.6 (Level AAA)
\
- - WCAG 2.0 Glossary - Contrast Ratio
\
- - WCAG 2.0 - MathML version of the relative luminance definition
\
-
\
-Color to edit
\
- It is either the text or background color. Default is text color.
\
- The color you choose will be modified until we find a valid color. \
- The other color won't change.
\
-Gimme / The algorithms
\
-“Valid colors and very close to initial color”
\
-\
- This is the default algorithm. \
- It offers color options really close to the initial color. \
- (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \
-
\
- \
- For some color combinations, the algorithm may not give any result ; \
- in such a case, use the other algorithm.\
-
\
-“A range of valid colors”
\
- \
- This is the backup algorithm, in case the first one gives no result. \
- Nevertheless, color options may be (strongly) different from the initial color. \
-
\
- User Feedback
\
-If you have any problems with or questions about Contrast-Finder, please contact us:
\
-\
- - Asqatasun forum
\
- - Twitter @Contrast_Finder
\
- - Contrast-Finder on Github
\
-
\
- Contribute to Contrast-Finder
\
- \
- All contributions are warmly welcome ! \
- Translation, correction, bug report, new feature…
\
- Feel free to play with \
- source code, \
- or discuss in the forum. \
-
-######### unused i18n entries
+ - WCAG 2.0 Glossary - Contrast Ratio
\
+ - WCAG 2.0 - Contrast (Minimum): success criteria 1.4.3 (Level AA)
\
+ - WCAG 2.0 - Contrast (Minimum): understanding success criteria 1.4.3
\
+ - WCAG 2.0 - Contrast (Enhanced): success criteria 1.4.6 (Level AAA)
\
+ - WCAG 2.0 - Contrast (Enhanced): understanding success criteria 1.4.6
\
+ - WCAG 2.0 - MathML version of the relative luminance definition
\
+
+######### unused i18n entries ##############################################
# form.results=Results
# form.usage=Usage:
# form.ratioMedium=Small text (size < 18px, Level AA)
# form.ratioShort=Big text (size ≥ 18px, Level AA)
-# form.ratioHigh=Strenghten contrast (Level AAA)
-# form.description_v2=Find me the good constrasts, for web accessibility, between these two colors:
+# form.ratioHigh=Strengthen contrast (Level AAA)
+# form.description_v2=Find me the good contrasts, for web accessibility, between these two colors:
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_en.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_en.properties
index c92d3dc9..6d11b637 100644
--- a/webapp/src/main/resources/i18n/contrast-finder_utf8_en.properties
+++ b/webapp/src/main/resources/i18n/contrast-finder_utf8_en.properties
@@ -8,7 +8,9 @@ home.metaDescription=Contrast-Finder finds correct color contrasts for web acces
Contrast-Finder is designed to be used by webdesigners, web developers \
or web accessibility professionals to improve the readability of HTML pages and websites.
logo.link.title=Back to the homepage
-nav.language-switch.aria-label=Languages
+nav.language=english
+nav.language-switching=Switch to english
+nav.language-switching.aria-label=Languages
result.title.colors=colors
result.title.foregroundColor=text
result.title.backgroundColor=background
@@ -23,6 +25,9 @@ form.component=Color to edit
form.componentForeground=Edit the text color
form.componentBackground=Edit the background color
form.ratio=Minimum ratio
+form.currentRatio=Current ratio:
+form.currentRatio.alt.valid=The contrast of your colours is sufficient.
+form.currentRatio.alt.fail=The contrast of your colours is insufficient.
form.contrastOld=Old contrast
form.contrastNew=New contrast
form.validate=Find valid colors
@@ -69,25 +74,43 @@ footer.poweredBy=Powered by
footer.availableUnder=available under
footer.link-twitter=Follow Contrast-Finder on Twitter
footer.link-git=Contributing to Contrast-Finder on GitHub
-home.noResultTxt=What is Contrast Finder?
\
- Contrast-Finder is a tool which computes the contrast between \
+info.about.title=What is Contrast Finder?
+info.about=
\
+ Contrast-Finder is a tool which computes the contrast between \
two colors (background, foreground) and checks if the contrast is valid. \
When the contrast is not valid, the main target is to suggest some correct colors contrasts. \
\
Contrast-Finder is designed to be used by webdesigners, web developers \
or web accessibility professionals to improve the readability of HTML pages and websites. \
-
\
-Help / How to use this tool?
\
- The Contrast-Finder interface is a form with five mandatory fields.
\
+
+info.feedback.title=User Feedback
+info.feedback=\
+ If you have any problems with or questions about Contrast-Finder, please contact us: \
+
\
+\
+ - Asqatasun forum
\
+ - Twitter @Contrast_Finder
\
+ - Contrast-Finder on Github
\
+
+info.contribute.title=Contribute to Contrast-Finder
+info.contribute= \
+ All contributions are warmly welcome ! \
+ Translation, correction, bug report, new feature…
\
+ Feel free to play with \
+ source code, \
+ or discuss in the forum. \
+
+help.title=Help / How to use this tool?
+help.head= The Contrast-Finder interface is a form with five mandatory fields.
\
\
- Text color
\
- Background color
\
- Minimum ratio
\
- Color to edit
\
- Gimme
\
-
\
-Text color / Foreground
\
- \
+
+help.txt-color.title=Text color / Foreground
+help.txt-color=
\
This is the color of the text. \
You can fill in this field with color keyword, an hexadecimal value, \
or an RGB value. \
@@ -107,17 +130,42 @@ home.noResultTxt=
What is Contrast FinderFFF or FFFFFF works perfectly. \
\
Color with RGB values
\
- Example: rgb(255,255,255).
\
+
Example: rgb(255,255,255).
\
You can also use a short syntax like 255,255,255, \
which be interpreted as rgb(255,255,255). \
-
\
-Background color
\
- \
+
+help.bg-color.title=Background color
+help.bg-color= \
This is the color of the background.
\
This field works just like the text color field.\
-
\
-Minimum ratio
\
- Three possible values 3, 4.5 and 7.
\
+
+help.color-to-edit.title=Color to edit
+help.color-to-edit= It is either the text or background color. Default is text color.
\
+ The color you choose will be modified until we find a valid color. \
+ The other color won't change.
+help.algo.title=Gimme / The algorithms
+help.algo=“Valid colors and very close to initial color”
\
+ \
+ This is the default algorithm. \
+ It offers color options really close to the initial color. \
+ (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \
+
\
+ \
+ For some color combinations, the algorithm may not give any result ; \
+ in such a case, use the other algorithm.\
+
\
+“A range of valid colors”
\
+ \
+ This is the backup algorithm, in case the first one gives no result. \
+ Nevertheless, color options may be (strongly) different from the initial color. \
+
+help.ratio.title=Minimum ratio
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio= Three possible values 3, 4.5 and 7.
\
How to choose a ratio? It depends on the following elements:
\
\
- Level of accessibility wanted: AA or AAA.
\
@@ -127,10 +175,10 @@ home.noResultTxt=What is Contrast Finder Level AA \
Two elements (size and bold) gives four combinations:
\
\
- - Text not bold + text size <
18px: ratio = 4.5 \
- - Text not bold + text size >
18px: ratio = 3 \
- - Text bold + text size <
14px: ratio = 4.5 \
- - Text bold + text size >
14px: ratio = 3 \
+ - Text not bold + text size <
24px: ratio = 4.5 \
+ - Text not bold + text size >
24px: ratio = 3 \
+ - Text bold + text size <
19px: ratio = 4.5 \
+ - Text bold + text size >
19px: ratio = 3 \
\
Level AAA
\
For level AAA the logic is the same, only the ratio increases in the the following way:
\
@@ -140,59 +188,26 @@ home.noResultTxt=What is Contrast Finder \
Text size understanding
\
\
- - The
14px criteria can be understood as equivalent \
+ - The
19px criteria can be understood as equivalent \
of 14pt or 120% or 1.2em. \
- - The
18px criteria can be understood as equivalent \
+ - The
24px criteria can be understood as equivalent \
of 18pt or 150% or 1.5em. \
\
For a full and exhaustive understanding of how to interpret text size, one should read the \
defintion of large-scale text from WCAG.
\
All details about the contrast ratio
\
\
- - WCAG 2.0 success criteria 1.4.3 (Level AA)
\
- - WCAG 2.0 success criteria 1.4.6 (Level AAA)
\
- - WCAG 2.0 Glossary - Contrast Ratio
\
- - WCAG 2.0 - MathML version of the relative luminance definition
\
-
\
-Color to edit
\
- It is either the text or background color. Default is text color.
\
- The color you choose will be modified until we find a valid color. \
- The other color won't change.
\
-Gimme / The algorithms
\
-“Valid colors and very close to initial color”
\
-\
- This is the default algorithm. \
- It offers color options really close to the initial color. \
- (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \
-
\
- \
- For some color combinations, the algorithm may not give any result ; \
- in such a case, use the other algorithm.\
-
\
-“A range of valid colors”
\
- \
- This is the backup algorithm, in case the first one gives no result. \
- Nevertheless, color options may be (strongly) different from the initial color. \
-
\
- User Feedback
\
-If you have any problems with or questions about Contrast-Finder, please contact us:
\
-\
- - Asqatasun forum
\
- - Twitter @Contrast_Finder
\
- - Contrast-Finder on Github
\
-
\
- Contribute to Contrast-Finder
\
- \
- All contributions are warmly welcome ! \
- Translation, correction, bug report, new feature…
\
- Feel free to play with \
- source code, \
- or discuss in the forum. \
-
-######### unused i18n entries
+ - WCAG 2.0 Glossary - Contrast Ratio
\
+ - WCAG 2.0 - Contrast (Minimum): success criteria 1.4.3 (Level AA)
\
+ - WCAG 2.0 - Contrast (Minimum): understanding success criteria 1.4.3
\
+ - WCAG 2.0 - Contrast (Enhanced): success criteria 1.4.6 (Level AAA)
\
+ - WCAG 2.0 - Contrast (Enhanced): understanding success criteria 1.4.6
\
+ - WCAG 2.0 - MathML version of the relative luminance definition
\
+
+######### unused i18n entries ##############################################
# form.results=Results
# form.usage=Usage:
# form.ratioMedium=Small text (size < 18px, Level AA)
# form.ratioShort=Big text (size ≥ 18px, Level AA)
-# form.ratioHigh=Strenghten contrast (Level AAA)
-# form.description_v2=Find me the good constrasts, for web accessibility, between these two colors:
+# form.ratioHigh=Strengthen contrast (Level AAA)
+# form.description_v2=Find me the good contrasts, for web accessibility, between these two colors:
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_es.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_es.properties
new file mode 100644
index 00000000..3e3cb929
--- /dev/null
+++ b/webapp/src/main/resources/i18n/contrast-finder_utf8_es.properties
@@ -0,0 +1,211 @@
+###### i18n file in UTF-8 character encoding #######################
+NOT_A_VALID_COLOR=El color debe estar comprendido entre #000000 y #FFFFFF
+NOT_A_VALID_RATIO.colorModel.ratio=Ratio inválido
+home.titleTag=Contrast Finder, encuentra los contrastes adecuados de color para crear webs accesibles (WCAG)
+###### 330 characters max for "home.metaDescription"
+home.metaDescription=Contrast-Finder encuentra los contrastes adecuados de color para crear webs accesibles (WCAG). \
+ Esta herramienta ayuda a validar los tests de accesibilidad web (a11y) sobre contrastes de color. \
+ Contrast-Finder está diseñada para ser utilizada por diseñadores web, desarrolladores web \
+ o profesionales de la accesibilidad web para mejorar la facilidad de lectura de páginas HTML sitios web.
+logo.link.title=Volver a página inicial
+nav.language=español
+#nav.language-switching=Switch to Español @@@TODO i18n
+nav.language-switching.aria-label=Idiomas
+result.title.colors=colores
+result.title.foregroundColor=texto
+result.title.backgroundColor=fondo
+result.title.minRation=ratio mínimo
+form.fillInFields=Por favor, rellena los siguientes campos:
+form.description=Contrast-Finder encuentra los contrastes adecuados de color para crear webs accesibles
+form.help=Color en hexadecimal, RGB o palabras clave de color CSS.
\
+ Example: #FFFFFF, rgb(255,255,255) o white
+form.foregroundColor=Color del texto
+form.backgroundColor=Color del fondo
+form.component=Color a editar
+form.componentForeground=Editar el color del texto
+form.componentBackground=Editar el color del fondo
+form.ratio=Ratio mínimo
+form.currentRatio=Ratio actual:
+form.currentRatio.alt.valid=El contraste de tus colores es suficiente.
+form.currentRatio.alt.fail=El contraste de tus colores no es suficiente.
+form.contrastOld=Anterior contraste
+form.contrastNew=Nuevo contraste
+form.validate=Encuentra colores válidos
+form.validContrast=Contraste válido:
+form.validContrastDesc=Los colores escogidos ya son adecuados
+##### For [form.resultNumber]
+##### ---> Do not translate "choice", it is an internal ID
+form.resultNumber={0} {0,choice,1#resultado|1 \
+ Los criterios WCAG \
+ de validez 1.4.3 \
+ \
+ requieren que el texto tenga un contraste mínimo \
+ de 4.5 (y 3 para textos largos).
+footer.LikedCf=¿Te gusta Contrast-Finder?
Prueba Asqatasun, la herramienta de código abierto para análisis de accesibilidad
+form.contrastSolutionDistance=Distancia
+form.contrastSolutionDistanceEx=Distancia desde el color inicial
+form.objectifs=Dame
+form.algoHSV=un rango válido de colores
+form.algoRGB=colores válidos y muy cercanos al color inicial
+form.invalidColor=Color inválido
+form.changeComponent=prueba de nuevo cambiando el
+form.invalidAlgo=El valor del algoritmo no es válido.
+form.tryHsv=Dame un rango de colores
+form.tryRgb=Dame colores válidos y muy cercanos al color inicial
+form.testedColors=colores testados
+form.notSatisfied=¿Insatisfecho?
+form.anyResult=Vamos
+form.oppositeComponentForeground=color de fondo
+form.oppositeComponentBackground=color de primer plano
+message.addon=Hey! Has probado el nuevo Contrast-Finder addon de Firefox?
+footer.poweredBy=Creado por
+footer.availableUnder=disponible bajo
+footer.link-twitter=Sigue a Contrast-Finder en Twitter
+footer.link-git=Contribuye a Contrast-Finder en GitHub
+info.about.title=¿Qué es Contrast Finder?
+info.about= \
+ Contrast-Finder es una herramienta que evalúa el contraste entre \
+ dos colores (fondo, primer plano) y comprueba si el contraste es aceptable. \
+ Cuando el contraste no es aceptable, el objetivo principal es sugerir alternativas de contraste de color válidas. \
+
\
+ Contrast-Finder está diseñada para ser utilizada por diseñadores web, desarrolladores web \
+ o profesionales de la accesibilidad web para mejorar la facilidad de lectura de páginas HTML sitios web. \
+
+info.feedback.title=Comentarios del usuario
+info.feedback=\
+ Si tienes problemas o presguntas sobre Contrast-Finder, por favor, contacta con nosotros: \
+
\
+\
+ - Foro Asqatasun
\
+ - Twitter @Contrast_Finder
\
+ - Contrast-Finder en Github
\
+
+info.contribute.title=Contribuye a Contrast-Finder
+info.contribute= \
+ Todas las contribuciones son bienvenidas ! \
+ Traducciones, correciones, informes de errores, nuevas características…
\
+ Siéntete libre de jugar con el \
+ código fuente, \
+ o de opinar en el foro. \
+
+help.title=Ayuda / ¿Cómo usar esta herramienta?
+help.head= La interfaz de Contrast-Finder es un formulario con cinco campos obligatorios.
\
+ \
+ - Color del texto
\
+ - Color del fondo
\
+ - Ratio mínimo
\
+ - Color a editar
\
+ - Dámelo
\
+
+help.txt-color.title=Color del texto / Primer plano
+help.txt-color= \
+ Este es el color del texto. \
+ Puedes rellenar este campo con palabras clave de color CSS, un valor hexadecimal, \
+ o un valor RGB. \
+ El valor proporcionado será previsualizado a la derecha del campo. \
+
\
+Palabras clave de color CSS
\
+ Por ejemplo: Black, Silver, YellowGreen, MediumPurple.
\
+ Los valores válidos se pueden encontrar en \
+ palabras clave de color CSS \
+ (desde CSS nivel 1 a CSS nivel 4). \
+
\
+Color con valores hexadecimal
\
+ Por ejemplo: #AABBCC. \
+ Los valores con formato #ABC también funcionan, \
+ el sistema completará el campo automáticamente con el valor #AABBCC. \
+ Este campo puede ser usado sin el carácter #, \
+ de modo que FFF o FFFFFF funcionan sin problemas. \
+
\
+Colores con valores RGB
\
+ Por ejemplo: rgb(255,255,255).
\
+ Se puede utilizar la sintáxis abreviada 255,255,255, \
+ que será interpretada como rgb(255,255,255). \
+
+help.bg-color.title=Color del fondo
+help.bg-color= \
+ Este es el color del fondo.
\
+ Este campo funciona exactamente como el campo de color de texto.\
+
+help.color-to-edit.title=Color a editar
+help.color-to-edit= Puede referirse tanto al color del texto como al color del fondo. Por defecto ese refiere al color del texto.
\
+ El color seleccionado será modificado hasta encontrar un color válido. \
+ El otro color no cambiará.
+help.algo.title=Dámelo / Los algoritmos
+help.algo=“Colores va´lidos y muy cercanos al color inicial”
\
+ \
+ Este es el algoritmo por defecto. \
+ Ofrece opciones de colores muy cercanas al color inicial. \
+ (La distancia de color es evaluada de forma matemática, que puede variar del punto de vista de un diseñador.) \
+
\
+ \
+ Para algunas combinaciones de colores, el algoritmo no ofrece ningún resutado ; \
+ en este caso, se recomienda usar el otro algoritmo.\
+
\
+“Un rango de colores válidos”
\
+ \
+ Este es el algoritmo alternativo, en caso de que el primero no ofrezca ningún resultado. \
+ Sin embargo, los colores ofrecidos pueden diferir (significativamente) del color inicial. \
+
+help.ratio.title=Ratio mínimo
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio= Hay tres posibles valores: 3, 4.5 y 7.
\
+ ¿Cómo escoger un ratio? Dependerá de los siguientes elementos:
\
+ \
+ - Nivel de accesibilidad deseado: AA o AAA.
\
+ - Tamaño del texto.
\
+ - ¿El texto está en negrita?
\
+
\
+ Nivel AA
\
+ Dos elementos (tamaño y negrita) nos dan cuatro combianciones:
\
+ \
+ - Texto sin negrita + tamaño de texto <
24px: ratio = 4.5 \
+ - Texto sin negrita + tamaño de texto >
24px: ratio = 3 \
+ - Texto con negrita + tamaño de texto <
19px: ratio = 4.5 \
+ - Texto con negrita + tamaño de texto >
19px: ratio = 3 \
+
\
+ Nivel AAA
\
+ Para el nivel AAA la lógica es la misma, pero el ratio se incrementa de la siguiente manera:
\
+ \
+ - El ratio 4.5 se convierte en 7
\
+ - El ratio 3 se convierte en 4.5
\
+
\
+ Entendiendo el tamaño de texto
\
+ \
+ - El criterio de
19px puede ser entendido como equivalente \
+ a 14pt o 120% o 1.2em. \
+ - El criterio de
24px puede ser entendido como equivalente \
+ a 18pt o 150% o 1.5em. \
+
\
+ Para una compresión exhaustiva de cómo interpretar el tamaño de texto, se debe leer la \
+ definición de texto de gran tamaño de la WCAG.
\
+ Todos los detalles sobre el ratio de contraste
\
+\
+ - WCAG 2.0 criterios de validez 1.4.3 (Nivel AA)
\
+ - WCAG 2.0 criterios de validez 1.4.6 (Nivel AAA)
\
+ - WCAG 2.0 Glosario - Ratio de Contraste
\
+ - WCAG 2.0 - Versión MathML de la definición de luminosidad relativa
\
+
+######### unused i18n entries ##############################################
+# form.results=Results
+# form.usage=Usage:
+# form.ratioMedium=Small text (size < 18px, Level AA)
+# form.ratioShort=Big text (size ≥ 18px, Level AA)
+# form.ratioHigh=Strenghten contrast (Level AAA)
+# form.description_v2=Find me the good constrasts, for web accessibility, between these two colors:
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_fr.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_fr.properties
index ea4896f7..73356a11 100644
--- a/webapp/src/main/resources/i18n/contrast-finder_utf8_fr.properties
+++ b/webapp/src/main/resources/i18n/contrast-finder_utf8_fr.properties
@@ -8,7 +8,9 @@ home.metaDescription=Outil en ligne pour vérifier si le contraste de vos couleu
de celles que vous venez de tester. Utilisé par les webdesigners, les développeurs web \
ou les professionnels de l’accessibilité web afin d’améliorer la lisibilité des sites web.
logo.link.title=Retour à la page d’accueil
-nav.language-switch.aria-label=Langues
+nav.language=français
+nav.language-switching=Passer en français
+nav.language-switching.aria-label=Langues
result.title.colors=couleurs
result.title.foregroundColor=texte
result.title.backgroundColor=fond
@@ -23,6 +25,9 @@ form.component=Couleur à modifier
form.componentForeground=Modifier la couleur du texte
form.componentBackground=Modifier la couleur du fond
form.ratio=Ratio minimum
+form.currentRatio=Ratio actuel :
+form.currentRatio.alt.valid=Le contraste de vos couleurs est suffisant.
+form.currentRatio.alt.fail=Le contraste de vos couleurs est insuffisant.
form.contrastOld=Ancien contraste
form.contrastNew=Nouveau contraste
form.validate=Trouver des couleurs valides
@@ -69,8 +74,8 @@ footer.poweredBy=Propulsé par
footer.availableUnder=disponible sous licence
footer.link-twitter = Suivez Contrast-Finder sur Twitter
footer.link-git = Contribuer au logiciel Contrast-Finder sur GitHub
-home.noResultTxt=Contrast Finder, c’est quoi ?
\
- Contrast-Finder est un outil qui calcule le contraste entre \
+info.about.title=Contrast Finder, c’est quoi ?
+info.about=
Contrast-Finder est un outil qui calcule le contraste entre \
deux couleurs (arrière-plan et premier plan) et qui vérifie si il est suffisant. \
Si ce contraste n’est pas valide, l’outil suggère plusieurs propositions \
de couleurs alternatives ayant un contraste correct. \
@@ -78,47 +83,97 @@ home.noResultTxt=
Contrast Finder<
Contrast-Finder est conçu pour être utilisé par les webdesigners, \
les développeurs web ou les professionnels de l’accessibilité web \
afin d’améliorer la lisibilité des pages HTML et des sites web. \
+
+info.feedback.title=Une question ?
+info.feedback= \
+ Si vous avez des questions ou des remarques sur Contrast-Finder, contactez-nous : \
\
-Aide / Comment utiliser cet outil ?
\
- L’interface de Contrast-Finder est un formulaire de cinq champs obligatoires.
\
+ \
+ - Forum Asqatasun
\
+ - Twitter @Contrast_Finder
\
+ - Contrast-Finder sur Github
\
+
+info.contribute.title=Contribuer à Contrast-Finder
+info.contribute= \
+ Toutes les contributions sont chaleureusement accueillies ! \
+ Traduction, correction, rapport de bug, nouvelle fonctionnalité… \
+ N’hésitez pas à jouer avec le \
+ code source \
+ ou à en discuter sur le forum. \
+
+help.title=Aide / Comment utiliser cet outil ?
+help.head= L’interface de Contrast-Finder est un formulaire de cinq champs obligatoires.
\
\
-Premier plan : couleur du texte
\
- \
+
+help.txt-color.title=Premier plan : couleur du texte
+help.txt-color=
\
C’est la couleur du texte. \
- Vous pouvez remplir ce champ avec un nom de couleur CSS, une valeur hexadécimale, \
- ou une valeur RGB. \
+ Vous pouvez remplir ce champ avec un nom de couleur CSS, une valeur hexadécimale, \
+ ou une valeur RGB. \
La valeur saisie est alors prévisualisée à droite du champ. \
\
Couleur par mots-clés
\
Exemple : Black, Silver, YellowGreen, MediumPurple.
\
-Les valeurs autorisées sont les noms des couleurs utilisables en CSS \
+ Les valeurs autorisées sont les noms des couleurs utilisables en CSS \
(du niveau CSS 1 au niveau CSS 4). \
\
Couleur en hexadécimal
\
Exemple : #AABBCC. \
- Notez que #ABC fonctionne également, \
- nous complétons automatiquement le champ avec #AABBCC. \
- Vous pouvez également utiliser ce champ sans le caractère #, \
- ainsi FFF ou FFFFFF fonctionnent parfaitement. \
+ Notez que #ABC fonctionne également, \
+ nous complétons automatiquement le champ avec #AABBCC. \
+ Vous pouvez également utiliser ce champ sans le caractère #, \
+ ainsi FFF ou FFFFFF fonctionnent parfaitement. \
\
Couleur en RGB
\
- Exemple : rgb(255,255,255).
\
- De la même manière, 255,255,255 fonctionne également, \
- nous remplaçons la valeur de ce champ par rgb(255,255,255). \
+
Exemple : rgb(255,255,255).
\
+ De la même manière, 255,255,255 fonctionne également, \
+ nous remplaçons la valeur de ce champ par rgb(255,255,255). \
+
+help.bg-color.title=Arrière-plan : couleur du fond
+help.bg-color= \
+ C’est la couleur d’arrière-plan.
\
+ Ce champ fonctionne comme le champ couleur du texte.\
+
+help.color-to-edit.title=Couleur à modifier
+help.color-to-edit= \
+ Il s’agit de la couleur du texte ou de la couleur du fond. \
+ Par défaut, c’est la couleur du texte.\
+
\
+ \
+ La couleur que vous choisissez sera modifiée jusqu’à ce que l’outil trouve une couleur valide. \
+ L’autre couleur ne changera pas. \
+
+help.algo.title=Propose-moi / Les algorithmes
+help.algo=“Couleurs valides et très proches de la couleur initiale”
\
+ \
+ Ceci est l’algorithme par défaut. \
+ Il propose des couleurs extrêmement proches de la couleur initiale. \
+ (La proximité est calculée sur des critères mathématiques, qui peuvent être différents d’une vision graphique.) \
+
\
+ \
+ L’algorithme dans certains cas ne renvoi aucun résultat ; \
+ dans ce cas, choisissez l’autre algorithme. :) \
\
-Arrière-plan : couleur du fond
\
+“Palette de couleurs valides”
\
\
- C’est la couleur d’arrière-plan.
\
- Ce champ fonctionne comme le champ couleur du texte.\
-
\
-Ratio minimum
\
- Trois valeurs possibles : 3, 4.5 et 7.
\
+ Ceci est l’algorithme “de secours”, au cas où le premier ne donne rien. \
+ En revanche, les couleurs proposées peuvent être plus éloignées, \
+ voire franchement distincte de la couleur initiale. \
+
+help.ratio.title=Ratio minimum
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio= \
+ Trois valeurs possibles : 3, 4.5 et 7. \
+
\
Comment choisir un ratio ? Cela dépend des éléments suivants :
\
\
- Niveau d’accessibilité souhaité : AA ou AAA.
\
@@ -128,10 +183,10 @@ Les valeurs autorisées sont les WCAG 2.0 success criteria 1.4.3 (Level AA)\
- - WCAG 2.0 success criteria 1.4.6 (Level AAA)
\
- WCAG 2.0 Glossary - Contrast Ratio
\
+ - WCAG 2.0 - Contrast (Minimum): success criteria 1.4.3 (Level AA)
\
+ - WCAG 2.0 - Contrast (Minimum): understanding success criteria 1.4.3
\
+ - WCAG 2.0 - Contrast (Enhanced): success criteria 1.4.6 (Level AAA)
\
+ - WCAG 2.0 - Contrast (Enhanced): understanding success criteria 1.4.6
\
- WCAG 2.0 - MathML version of the relative luminance definition
\
- WCAG 2.0 - Defintion of large-scale text
\
\
\
-\
-Couleur à modifier
\
- Il s’agit de la couleur du texte ou de la couleur du fond. Par défaut, c’est la couleur du texte.
\
- La couleur que vous choisissez sera modifiée jusqu’à ce que l’outil trouve une couleur valide. L’autre couleur ne changera pas.
\
-Propose-moi / Les algorithmes
\
-“Couleurs valides et très proches de la couleur initiale”
\
-\
- Ceci est l’algorithme par défaut. \
- Il propose des couleurs extrêmement proches de la couleur initiale. \
- (La proximité est calculée sur des critères mathématiques, qui peuvent être différents d’une vision graphique.) \
-
\
- \
- L’algorithme dans certains cas ne renvoi aucun résultat ; \
- dans ce cas, choisissez l’autre algorithme. :) \
-
\
-“Palette de couleurs valides”
\
- \
- Ceci est l’algorithme “de secours”, au cas où le premier ne donne rien. \
- En revanche, les couleurs proposées peuvent être plus éloignées, \
- voire franchement distincte de la couleur initiale. \
-
\
- Une question ?
\
-Si vous avez des questions ou des remarques sur Contrast-Finder, contactez-nous :
\
-\
- - Forum Asqatasun
\
- - Twitter @Contrast_Finder
\
- - Contrast-Finder sur Github
\
-
\
- Contribuer à Contrast-Finder
\
- Toutes les contributions sont chaleureusement accueillies ! \
- Traduction, correction, rapport de bug, nouvelle fonctionnalité… \
- N’hésitez pas à jouer avec le \
- code source \
- ou à en discuter sur le forum.
+
######### unused i18n entries
# form.results=Resultats
# form.usage=Utilisation :
# form.ratioMedium=Texte petit (Taille < 18px, Niveau AA)
# form.ratioShort=Grand texte (Taille ≥ 18px, Niveau AA)
# form.ratioHigh=Renforcer le contraste (Niveau AAA)
+# form.description_v2=Find me the good contrasts, for web accessibility, between these two colors:
+
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_ko.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_ko.properties
index 3f1150b6..d92bc862 100644
--- a/webapp/src/main/resources/i18n/contrast-finder_utf8_ko.properties
+++ b/webapp/src/main/resources/i18n/contrast-finder_utf8_ko.properties
@@ -8,7 +8,9 @@ home.metaDescription=Contrast-Finder는 웹 접근성 기준(WCAG)에 적합한
Contrast-Finder는 웹디자이너, 웹 개발자 혹은 웹 접근성 전문가가 \
HTML 페이지와 웹사이트의 가독성을 개선하는 데 사용할 수 있도록 디자인되었습니다.
logo.link.title=홈페이지로 되돌아 가기
-nav.language-switch.aria-label=언어
+nav.language=한국어
+nav.language-switching=한국어로 전환
+nav.language-switching.aria-label=언어
result.title.colors=대비 색
result.title.foregroundColor=본문 글자
result.title.backgroundColor=배경
@@ -23,6 +25,9 @@ form.component=교정하려는 색
form.componentForeground=본문 글자 색을 교정
form.componentBackground=배경 색을 교정
form.ratio=최소 비율
+#form.currentRatio=@TODO
+#form.currentRatio.alt.valid=@TODO
+#form.currentRatio.alt.fail=@TODO
form.contrastOld=원래의 색 대비
form.contrastNew=새로운 색 대비
form.validate=기준에 적합한 색 검색하기
@@ -69,25 +74,73 @@ footer.poweredBy=운용 기술:
footer.availableUnder=사용 권한:
footer.link-twitter=트위터에서 Contrast-Finder 팔로우하기
footer.link-git=GitHub에 있는 Contrast-Finder에 기여하기
-home.noResultTxt=Contrast Finder가 무엇인가요?
\
- Contrast-Finder는 두 가지 색(배경 색, 본문 글자 색)의 대비를 계산해서 \
+info.about.title=Contrast Finder가 무엇인가요?
+info.about=
\
+ Contrast-Finder는 두 가지 색(배경 색, 본문 글자 색)의 대비를 계산해서 \
색 대비가 충분한지 알려주는 도구입니다. \
색 대비가 충분하지 않다면, 몇 가지 충분히 대비되는 색의 조합을 제안해 드리는 것이 주요 목적입니다. \
\
Contrast-Finder는 웹디자이너, 웹 개발자 혹은 웹 접근성 전문가가 \
HTML 페이지와 웹사이트의 가독성을 개선하는 데 사용할 수 있도록 디자인되었습니다. \
-
\
-도움말 / 이 도구는 어떻게 사용하나요?
\
- Contrast-Finder 인터페이스 양식에는 다섯 개의 필수 입력 항목이 있습니다.
\
+
+info.feedback.title=사용자 건의
+info.feedback=Contrast-Finder를 사용하시면서 문제가 있거나 다른 문의 사항이 있으시면, 아래에 있는 통로로 연락해주시기 바랍니다:
\
+ \
+ - Asqatasun 포럼
\
+ - 트위터 @Contrast_Finder
\
+ - Contrast-Finder의 Github 저장소
\
+
+info.contribute.title=Contrast-Finder의 기능 개선 및 제안
+info.contribute= \
+ 어떠한 제안이든 모두 환영합니다! \
+ 번역, 문제 수정, 오류 보고, 새로운 기능…
\
+ 부담없이 \
+ 소스 코드를 가지고 놀아보시고, \
+ 포럼에서도 상의해 보세요. \
+
+help.title=도움말 / 이 도구는 어떻게 사용하나요?
+help.head= Contrast-Finder 인터페이스 양식에는 다섯 개의 필수 입력 항목이 있습니다.
\
\
-본문 글자 색
\
+
+help.txt-color.title=
+help.txt-color=
+help.bg-color.title=
+help.bg-color=
+help.color-to-edit.title=교정하려는 색
+help.color-to-edit= \
+ 본문 글자 색 또는 배경색을 선택하실 수 있습니다. 기본은 본문 글자 색.\
+
\
+ 선택하신 색은 나중에 기준에 적합한 색을 찾을 때까지 수정됩니다. \
+ 그리고 나머지 색은 바뀌지 않습니다. \
+
+help.algo.title=검색 범위 / 알고리듬
+help.algo=“처음 지정한 색과 아주 비슷하면서도 기준에 적합한 대비 색”
\
+ \
+ 이것이 기본으로 쓰이는 알고리듬입니다. \
+ 처음 지정한 색과 아주 가까운 색만 골라서 보여줍니다. \
+ (색의 편차는 수학적 방식으로 산출되며, 디자이너의 관점과는 다를 수 있습니다.) \
+
\
\
+ 몇몇 색 조합에 따라선, 알고리듬은 아무런 결과도 추출하지 못할 수 있습니다 ; \
+ 이 경우엔, 다른 알고리듬을 사용해 보십시오. \
+
\
+“확장된 색 범위 속 기준에 적합한 대비 색”
\
+ \
+ 차선책으로 쓰이는 알고리듬으로, 첫 번째 것이 아무런 결과도 보여주지 않을 때 사용합니다. \
+ 하지만, 산출되는 색은 최초 지정 색과 (많이) 다를 수 있습니다. \
+
+help.ratio.title=본문 글자 색
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio= \
본문에 쓰인 글자에 입히는 색입니다. \
이 항목에는 CSS 컬러 키워드, 16진법, 혹은 \
RGB 값을 입력하실 수 있습니다. \
@@ -127,10 +180,10 @@ home.noResultTxt=
Contrast Finder<
레벨 AA
\
두 가지 요소(크기와 볼드 유무)에 따라 다음과 같은 네 가지 조합을 도출할 수 있습니다:
\
\
- - 볼드체가 아닌 글자 + 글자 크기 <
18px: 비율 = 4.5 \
- - 볼드체가 아닌 글자 + 글자 크기 >
18px: 비율 = 3 \
- - 볼드체 글자 + 글자 크기 <
14px: 비율 = 4.5 \
- - 볼드체 글자 + 글자 크기 >
14px: 비율 = 3 \
+ - 볼드체가 아닌 글자 + 글자 크기 <
24px: 비율 = 4.5 \
+ - 볼드체가 아닌 글자 + 글자 크기 >
24px: 비율 = 3 \
+ - 볼드체 글자 + 글자 크기 <
19px: 비율 = 4.5 \
+ - 볼드체 글자 + 글자 크기 >
19px: 비율 = 3 \
\
레벨 AAA
\
레벨 AAA의 원리는 같으나, 비율만 다음과 같이 증가합니다:
\
@@ -140,55 +193,22 @@ home.noResultTxt=Contrast Finder<
\
글자 크기의 이해
\
\
- -
14px 정도의 크기는 14pt 또는 \
+ -
19px 정도의 크기는 14pt 또는 \
120% 혹은 1.2em 크기와 같은 것으로 칩니다. \
- -
18px 정도의 크기는 18pt 또는 \
+ -
24px 정도의 크기는 18pt 또는 \
150% 혹은 1.5em 크기와 같은 것으로 칩니다. \
\
- 글자 크기를 해석하는 방식에 관해서 더 깊고 자세히 알고 싶으시면, \
- WCAG에 기술된 large-scale text의 정의를 읽어보십시오.
\
+ \
+ 글자 크기를 해석하는 방식에 관해서 더 깊고 자세히 알고 싶으시면, \
+ WCAG에 기술된 large-scale text의 정의를 읽어보십시오. \
+
\
대비 비율에 관한 자세한 설명
\
\
- WCAG 2.0 통과 기준 1.4.3 (레벨 AA)
\
- WCAG 2.0 통과 기준 1.4.6 (레벨 AAA)
\
- WCAG 2.0 용어 해설 - 대비 비율
\
- WCAG 2.0 - MathML 버전의 상대 휘도 정의
\
-
\
-교정하려는 색
\
- 본문 글자 색 또는 배경색을 선택하실 수 있습니다. 기본은 본문 글자 색.
\
- 선택하신 색은 나중에 기준에 적합한 색을 찾을 때까지 수정됩니다. \
- 그리고 나머지 색은 바뀌지 않습니다.
\
-검색 범위 / 알고리듬
\
-“처음 지정한 색과 아주 비슷하면서도 기준에 적합한 대비 색”
\
- \
- 이것이 기본으로 쓰이는 알고리듬입니다. \
- 처음 지정한 색과 아주 가까운 색만 골라서 보여줍니다. \
- (색의 편차는 수학적 방식으로 산출되며, 디자이너의 관점과는 다를 수 있습니다.) \
-
\
- \
- 몇몇 색 조합에 따라선, 알고리듬은 아무런 결과도 추출하지 못할 수 있습니다 ; \
- 이 경우엔, 다른 알고리듬을 사용해 보십시오. \
-
\
-“확장된 색 범위 속 기준에 적합한 대비 색”
\
- \
- 차선책으로 쓰이는 알고리듬으로, 첫 번째 것이 아무런 결과도 보여주지 않을 때 사용합니다. \
- 하지만, 산출되는 색은 최초 지정 색과 (많이) 다를 수 있습니다. \
-
\
- 사용자 건의
\
-Contrast-Finder를 사용하시면서 문제가 있거나 다른 문의 사항이 있으시면, 아래에 있는 통로로 연락해주시기 바랍니다:
\
- \
- - Asqatasun 포럼
\
- - 트위터 @Contrast_Finder
\
- - Contrast-Finder의 Github 저장소
\
-
\
- Contrast-Finder의 기능 개선 및 제안
\
- \
- 어떠한 제안이든 모두 환영합니다! \
- 번역, 문제 수정, 오류 보고, 새로운 기능…
\
- 부담없이 \
- 소스 코드를 가지고 놀아보시고, \
- 포럼에서도 상의해 보세요. \
-
+
######### unused i18n entries
# form.results=개의 결과
# form.usage=사용:
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
index 14e2a176..6e0cee14 100644
--- a/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
+++ b/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
@@ -7,7 +7,9 @@ home.metaDescription=Ferramenta on-line para verificar se o contraste das cores
Contrast-Finder oferece esquemas de cores disponíveis perto daquelas que acabaste de testar. \
Acessibilidade dos sítios Web (WCAG).
logo.link.title=Voltar à pàgina inicial
-nav.language-switch.aria-label=línguas
+nav.language=português
+nav.language-switching=em Português
+nav.language-switching.aria-label=línguas
result.title.colors=cores
result.title.foregroundColor=texto
result.title.backgroundColor=fundo
@@ -23,6 +25,9 @@ form.component=Cor a alterar
form.componentForeground=Alterar a cor do texto
form.componentBackground=Alterar a cor de fundo
form.ratio=Rácio minimo
+#form.currentRatio=@TODO
+#form.currentRatio.alt.valid=@TODO
+#form.currentRatio.alt.fail=@TODO
form.contrastOld=Contraste anterior
form.contrastNew=Novo contraste
form.validate=Encontrar cores válidas
@@ -69,20 +74,41 @@ footer.poweredBy=Alimentado por
footer.availableUnder=disponível sob licença
footer.link-twitter=Segue Contrast-Finder no Twitter
footer.link-git=Contribuir para o software Contrast-Finder no GitHub
-home.noResultTxt= Alguma dúvida?
\
- Se tiveres perguntas ou observaçoes sobre Contrast-Finder, contacta-nos :
\
+info.about.title=
+info.about=
+info.feedback.title=Alguma dúvida?
+info.feedback= Se tiveres perguntas ou observaçoes sobre Contrast-Finder, contacta-nos :
\
\
- Contribuir ao Contrast-Finder
\
- Todas as contribuiçoes sao muito bem vindas! \
- Traduçoes, correcçoes, relatorios de erro, nova funcionalidade… \
-
-form.results=@@@TODO Results
-form.usage=@@@TODO Usage:
-form.ratioMedium=@@@TODO Small text (size < 18px, Level AA)
-form.ratioShort=@@@TODO Big text (size ≥ 18px, Level AA)
-form.ratioHigh=@@@TODO Strenghten contrast (Level AAA)
-form.description_v2=@@@TODO Find me the good constrasts, for web accessibility, between these two colors:
+
+info.contribute.title=Contribuir ao Contrast-Finder
+info.contribute= \
+ Todas as contribuiçoes sao muito bem vindas! \
+ Traduçoes, correcçoes, relatorios de erro, nova funcionalidade… \
+
+help.title=
+help.head=
+help.txt-color.title=
+help.txt-color=
+help.bg-color.title=
+help.bg-color=
+help.color-to-edit.title=
+help.color-to-edit=
+help.algo.title=
+help.algo=
+help.ratio.title=
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio=
+######### unused i18n entries ##############################################
+# form.results=Results
+# form.usage=Usage:
+# form.ratioMedium=Small text (size < 18px, Level AA)
+# form.ratioShort=Big text (size ≥ 18px, Level AA)
+# form.ratioHigh=Strengthen contrast (Level AAA)
+# form.description_v2=Find me the good contrasts, for web accessibility, between these two colors:
diff --git a/webapp/src/main/webapp/WEB-INF/pages/form.jsp b/webapp/src/main/webapp/WEB-INF/pages/form.jsp
index 3a9e6b8c..ff478533 100644
--- a/webapp/src/main/webapp/WEB-INF/pages/form.jsp
+++ b/webapp/src/main/webapp/WEB-INF/pages/form.jsp
@@ -149,9 +149,52 @@
<%-- hidden for default page--%>
+
+
+ <%-- https://www.w3.org/TR/wai-aria/#status
+ https://www.w3.org/TR/wai-aria/#marquee
+ http://ideance.net/publications/live-regions/explications.html
+ https://developer.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/
+ aria-live="off" ?
+ aria-live="polite" ?
+ role="status" ?
+ role="marquee" have an implicit aria-live value of off. --%>
+
+
+
+
+
+
+
+ 
"
+ alt="
-
+
+
+
+
+
+
+
+
+
diff --git a/webapp/src/main/webapp/WEB-INF/template/head.jspf b/webapp/src/main/webapp/WEB-INF/template/head.jspf
index ee05cb83..02820ae7 100644
--- a/webapp/src/main/webapp/WEB-INF/template/head.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/head.jspf
@@ -66,10 +66,21 @@
"@type": "WebApplication",
"name": "Contrast Finder",
"softwareVersion": "${appVersion}",
- "license": "https://github.com/Asqatasun/Contrast-Finder/blob/master/LICENSE",
+ "license": "https://github.com/Asqatasun/Contrast-Finder/blob/master/LICENSE",
"releaseNotes": "https://github.com/Asqatasun/Contrast-Finder/blob/master/CHANGELOG.md",
+ "downloadUrl": "https://github.com/Asqatasun/Contrast-Finder/releases",
"screenshot": "https://contrast-finder.org/public/media/images/screenshot/screenshot.EN_contrast-finder.v0.5.2_2017-07-27_grey_kraken.io-lossy.png",
- "applicationCategory": "BusinessApplication"
+ "applicationCategory": "BusinessApplication",
+ "applicationSubCategory": "WebApplication",
+ "operatingSystem": "any",
+ "availableLanguage": {
+ "@type": "Language",
+ "name": ["English","French","Korean","Portuguese","Spanish"]
+ },
+ "aggregateRating": {
+ "@type": "AggregateRating",
+ "reviewCount": "0"
+ }
}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/WEB-INF/template/header.jspf b/webapp/src/main/webapp/WEB-INF/template/header.jspf
index 56bb5ce5..f6db1646 100644
--- a/webapp/src/main/webapp/WEB-INF/template/header.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/header.jspf
@@ -10,30 +10,42 @@
+
+
@@ -42,11 +54,12 @@
- " role="navigation">
+ " role="navigation">
@@ -56,6 +69,14 @@
- english
+
+
+ - español
+
+
+ - español
+
+
- français
diff --git a/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf b/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
index 164e25b1..19e72107 100644
--- a/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
@@ -2,7 +2,7 @@
<%@ page pageEncoding="UTF-8" %>
<%-- APP version --%>
-
rgb(255,255,255). \ +
rgb(255,255,255). \ You can also use a short syntax like
255,255,255, \
which be interpreted as rgb(255,255,255). \
-\ This field works just like the text color field.\ -
What is Contrast Finder Level AA \
Two elements (size and bold) gives four combinations:
\
\
- - Text not bold + text size <
18px: ratio = 4.5 \
- - Text not bold + text size >
18px: ratio = 3 \
- - Text bold + text size <
14px: ratio = 4.5 \
- - Text bold + text size >
14px: ratio = 3 \
+ - Text not bold + text size <
24px: ratio = 4.5 \
+ - Text not bold + text size >
24px: ratio = 3 \
+ - Text bold + text size <
19px: ratio = 4.5 \
+ - Text bold + text size >
19px: ratio = 3 \
\
Level AAA
\
For level AAA the logic is the same, only the ratio increases in the the following way:
\
@@ -140,59 +188,26 @@ home.noResultTxt=What is Contrast Finder \
Text size understanding
\
\
- - The
14px criteria can be understood as equivalent \
+ - The
19px criteria can be understood as equivalent \
of 14pt or 120% or 1.2em. \
- - The
18px criteria can be understood as equivalent \
+ - The
24px criteria can be understood as equivalent \
of 18pt or 150% or 1.5em. \
\
For a full and exhaustive understanding of how to interpret text size, one should read the \
defintion of large-scale text from WCAG.
\
All details about the contrast ratio
\
\
- - WCAG 2.0 success criteria 1.4.3 (Level AA)
\
- - WCAG 2.0 success criteria 1.4.6 (Level AAA)
\
- - WCAG 2.0 Glossary - Contrast Ratio
\
- - WCAG 2.0 - MathML version of the relative luminance definition
\
-
\
-Color to edit
\
- It is either the text or background color. Default is text color.
\
- The color you choose will be modified until we find a valid color. \
- The other color won't change.
\
-Gimme / The algorithms
\
-“Valid colors and very close to initial color”
\
-\
- This is the default algorithm. \
- It offers color options really close to the initial color. \
- (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \
-
\
- \
- For some color combinations, the algorithm may not give any result ; \
- in such a case, use the other algorithm.\
-
\
-“A range of valid colors”
\
- \
- This is the backup algorithm, in case the first one gives no result. \
- Nevertheless, color options may be (strongly) different from the initial color. \
-
\
- User Feedback
\
-If you have any problems with or questions about Contrast-Finder, please contact us:
\
-\
- - Asqatasun forum
\
- - Twitter @Contrast_Finder
\
- - Contrast-Finder on Github
\
-
\
- Contribute to Contrast-Finder
\
- \
- All contributions are warmly welcome ! \
- Translation, correction, bug report, new feature…
\
- Feel free to play with \
- source code, \
- or discuss in the forum. \
-
-######### unused i18n entries
+ - WCAG 2.0 Glossary - Contrast Ratio
\
+ - WCAG 2.0 - Contrast (Minimum): success criteria 1.4.3 (Level AA)
\
+ - WCAG 2.0 - Contrast (Minimum): understanding success criteria 1.4.3
\
+ - WCAG 2.0 - Contrast (Enhanced): success criteria 1.4.6 (Level AAA)
\
+ - WCAG 2.0 - Contrast (Enhanced): understanding success criteria 1.4.6
\
+ - WCAG 2.0 - MathML version of the relative luminance definition
\
+
18px: ratio = 4.5 18px: ratio = 3 14px: ratio = 4.5 14px: ratio = 3 24px: ratio = 4.5 24px: ratio = 3 19px: ratio = 4.5 19px: ratio = 3 Text size understanding
\- \
-
- The
14pxcriteria can be understood as equivalent \ + - The
19pxcriteria can be understood as equivalent \ of14ptor120%or1.2em. \
- - The
18pxcriteria can be understood as equivalent \ + - The
24pxcriteria can be understood as equivalent \ of18ptor150%or1.5em. \
For a full and exhaustive understanding of how to interpret text size, one should read the \ defintion of large-scale text from WCAG.
\All details about the contrast ratio
\- \
-
- WCAG 2.0 success criteria 1.4.3 (Level AA) \ -
- WCAG 2.0 success criteria 1.4.6 (Level AAA) \ -
- WCAG 2.0 Glossary - Contrast Ratio \ -
- WCAG 2.0 - MathML version of the relative luminance definition \ -
Color to edit
\ -It is either the text or background color. Default is text color.
\ -The color you choose will be modified until we find a valid color. \ - The other color won't change.
\ -Gimme / The algorithms
\ -“Valid colors and very close to initial color”
\ -\ - This is the default algorithm. \ - It offers color options really close to the initial color. \ - (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \ -
\ -\ - For some color combinations, the algorithm may not give any result ; \ - in such a case, use the other algorithm.\ -
\ -“A range of valid colors”
\ -\ - This is the backup algorithm, in case the first one gives no result. \ - Nevertheless, color options may be (strongly) different from the initial color. \ -
\ -User Feedback
\ -If you have any problems with or questions about Contrast-Finder, please contact us:
\ -- \
-
- Asqatasun forum \ -
- Twitter @Contrast_Finder \ -
- Contrast-Finder on Github \ -
Contribute to Contrast-Finder
\ - \
- All contributions are warmly welcome ! \
- Translation, correction, bug report, new feature…
\
- Feel free to play with \
- source code, \
- or discuss in the forum. \
-
\ + Feel free to play with \ + source code, \ + or discuss in the forum. \ +
FFFFFF works perfectly. \
\
Color with RGB values
\ - Example: rgb(255,255,255).
\
+
Example: rgb(255,255,255).
\
You can also use a short syntax like 255,255,255, \
which be interpreted as rgb(255,255,255). \
-
Background color
\ -\ +
+help.bg-color.title=Background color +help.bg-color= \
This is the color of the background.
\
This field works just like the text color field.\
-
Minimum ratio
\ -Three possible values 3, 4.5 and 7.
\ + +help.color-to-edit.title=Color to edit +help.color-to-edit=It is either the text or background color. Default is text color.
\ +The color you choose will be modified until we find a valid color. \ + The other color won't change.
+help.algo.title=Gimme / The algorithms +help.algo=“Valid colors and very close to initial color”
\ +\ + This is the default algorithm. \ + It offers color options really close to the initial color. \ + (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \ +
\ +\ + For some color combinations, the algorithm may not give any result ; \ + in such a case, use the other algorithm.\ +
\ +“A range of valid colors”
\ +\ + This is the backup algorithm, in case the first one gives no result. \ + Nevertheless, color options may be (strongly) different from the initial color. \ +
+help.ratio.title=Minimum ratio +################################################################################## +# "help.ratio" will certainly evolve. +# ----> See issue #136 "Text size understanding : comments on pt => px conversion" +# https://github.com/Asqatasun/Contrast-Finder/issues/136 +################################################################################## +help.ratio=Three possible values 3, 4.5 and 7.
\How to choose a ratio? It depends on the following elements:
\- \
- Level of accessibility wanted: AA or AAA. \ @@ -127,10 +175,10 @@ home.noResultTxt=
- Text not bold + text size <
18px: ratio = 4.5 \
- - Text not bold + text size >
18px: ratio = 3 \
- - Text bold + text size <
14px: ratio = 4.5 \
- - Text bold + text size >
14px: ratio = 3 \
+ - Text not bold + text size <
24px: ratio = 4.5 \
+ - Text not bold + text size >
24px: ratio = 3 \
+ - Text bold + text size <
19px: ratio = 4.5 \
+ - Text bold + text size >
19px: ratio = 3 \
- The
14pxcriteria can be understood as equivalent \ + - The
19pxcriteria can be understood as equivalent \ of14ptor120%or1.2em. \
- - The
18pxcriteria can be understood as equivalent \ + - The
24pxcriteria can be understood as equivalent \ of18ptor150%or1.5em. \
- WCAG 2.0 success criteria 1.4.3 (Level AA) \ -
- WCAG 2.0 success criteria 1.4.6 (Level AAA) \ -
- WCAG 2.0 Glossary - Contrast Ratio \ -
- WCAG 2.0 - MathML version of the relative luminance definition \ -
- Asqatasun forum \ -
- Twitter @Contrast_Finder \ -
- Contrast-Finder on Github \ -
- WCAG 2.0 Glossary - Contrast Ratio \ +
- WCAG 2.0 - Contrast (Minimum): success criteria 1.4.3 (Level AA) \ +
- WCAG 2.0 - Contrast (Minimum): understanding success criteria 1.4.3 \ +
- WCAG 2.0 - Contrast (Enhanced): success criteria 1.4.6 (Level AAA) \ +
- WCAG 2.0 - Contrast (Enhanced): understanding success criteria 1.4.6 \ +
- WCAG 2.0 - MathML version of the relative luminance definition \ +
What is Contrast Finder Level AA \
Two elements (size and bold) gives four combinations:
\
\
-
\
Level AAA
\
For level AAA the logic is the same, only the ratio increases in the the following way:
\
@@ -140,59 +188,26 @@ home.noResultTxt=What is Contrast Finder \
Text size understanding
\
\
-
\
For a full and exhaustive understanding of how to interpret text size, one should read the \
defintion of large-scale text from WCAG.
\
All details about the contrast ratio
\
\
-
\
-Color to edit
\
- It is either the text or background color. Default is text color.
\
- The color you choose will be modified until we find a valid color. \
- The other color won't change.
\
-Gimme / The algorithms
\
-“Valid colors and very close to initial color”
\
-\
- This is the default algorithm. \
- It offers color options really close to the initial color. \
- (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \
-
\
- \
- For some color combinations, the algorithm may not give any result ; \
- in such a case, use the other algorithm.\
-
\
-“A range of valid colors”
\
- \
- This is the backup algorithm, in case the first one gives no result. \
- Nevertheless, color options may be (strongly) different from the initial color. \
-
\
- User Feedback
\
-If you have any problems with or questions about Contrast-Finder, please contact us:
\
-\
-
\
- Contribute to Contrast-Finder
\
- \
- All contributions are warmly welcome ! \
- Translation, correction, bug report, new feature…
\
- Feel free to play with \
- source code, \
- or discuss in the forum. \
-
-######### unused i18n entries
+
Text size understanding
\- \
-
For a full and exhaustive understanding of how to interpret text size, one should read the \ defintion of large-scale text from WCAG.
\All details about the contrast ratio
\- \
-
Color to edit
\ -It is either the text or background color. Default is text color.
\ -The color you choose will be modified until we find a valid color. \ - The other color won't change.
\ -Gimme / The algorithms
\ -“Valid colors and very close to initial color”
\ -\ - This is the default algorithm. \ - It offers color options really close to the initial color. \ - (Color distance is computed on on a mathematical basis, which may vary from a designer point of view.) \ -
\ -\ - For some color combinations, the algorithm may not give any result ; \ - in such a case, use the other algorithm.\ -
\ -“A range of valid colors”
\ -\ - This is the backup algorithm, in case the first one gives no result. \ - Nevertheless, color options may be (strongly) different from the initial color. \ -
\ -User Feedback
\ -If you have any problems with or questions about Contrast-Finder, please contact us:
\ -- \
-
Contribute to Contrast-Finder
\ - \
- All contributions are warmly welcome ! \
- Translation, correction, bug report, new feature…
\
- Feel free to play with \
- source code, \
- or discuss in the forum. \
-
\ + Example:
#FFFFFF, rgb(255,255,255) o white
+form.foregroundColor=Color del texto
+form.backgroundColor=Color del fondo
+form.component=Color a editar
+form.componentForeground=Editar el color del texto
+form.componentBackground=Editar el color del fondo
+form.ratio=Ratio mínimo
+form.currentRatio=Ratio actual:
+form.currentRatio.alt.valid=El contraste de tus colores es suficiente.
+form.currentRatio.alt.fail=El contraste de tus colores no es suficiente.
+form.contrastOld=Anterior contraste
+form.contrastNew=Nuevo contraste
+form.validate=Encuentra colores válidos
+form.validContrast=Contraste válido:
+form.validContrastDesc=Los colores escogidos ya son adecuados
+##### For [form.resultNumber]
+##### ---> Do not translate "choice", it is an internal ID
+form.resultNumber={0} {0,choice,1#resultado|1Prueba Asqatasun, la herramienta de código abierto para análisis de accesibilidad +form.contrastSolutionDistance=Distancia +form.contrastSolutionDistanceEx=Distancia desde el color inicial +form.objectifs=Dame +form.algoHSV=un rango válido de colores +form.algoRGB=colores válidos y muy cercanos al color inicial +form.invalidColor=Color inválido +form.changeComponent=prueba de nuevo cambiando el +form.invalidAlgo=El valor del algoritmo no es válido. +form.tryHsv=Dame un rango de colores +form.tryRgb=Dame colores válidos y muy cercanos al color inicial +form.testedColors=colores testados +form.notSatisfied=¿Insatisfecho? +form.anyResult=Vamos +form.oppositeComponentForeground=color de fondo +form.oppositeComponentBackground=color de primer plano +message.addon=Hey! Has probado el nuevo Contrast-Finder addon de Firefox? +footer.poweredBy=Creado por +footer.availableUnder=disponible bajo +footer.link-twitter=Sigue a Contrast-Finder en Twitter +footer.link-git=Contribuye a Contrast-Finder en GitHub +info.about.title=¿Qué es Contrast Finder? +info.about=
\ + Contrast-Finder es una herramienta que evalúa el contraste entre \ + dos colores (fondo, primer plano) y comprueba si el contraste es aceptable. \ + Cuando el contraste no es aceptable, el objetivo principal es sugerir alternativas de contraste de color válidas. \ +
\ +Contrast-Finder está diseñada para ser utilizada por diseñadores web, desarrolladores web \ + o profesionales de la accesibilidad web para mejorar la facilidad de lectura de páginas HTML sitios web. \ +
+info.feedback.title=Comentarios del usuario +info.feedback=\ + Si tienes problemas o presguntas sobre Contrast-Finder, por favor, contacta con nosotros: \ +
\ +- \
+
- Foro Asqatasun \ +
- Twitter @Contrast_Finder \ +
- Contrast-Finder en Github \ +
\
+ Todas las contribuciones son bienvenidas ! \
+ Traducciones, correciones, informes de errores, nuevas características…
\
+ Siéntete libre de jugar con el \
+ código fuente, \
+ o de opinar en el foro. \
+
La interfaz de Contrast-Finder es un formulario con cinco campos obligatorios.
\ +- \
+
- Color del texto \ +
- Color del fondo \ +
- Ratio mínimo \ +
- Color a editar \ +
- Dámelo \ +
\ + Este es el color del texto. \ + Puedes rellenar este campo con palabras clave de color CSS, un valor hexadecimal, \ + o un valor RGB. \ + El valor proporcionado será previsualizado a la derecha del campo. \ +
\ +Palabras clave de color CSS
\ + Por ejemplo: Black, Silver, YellowGreen, MediumPurple.
\
+ Los valores válidos se pueden encontrar en \
+ palabras clave de color CSS \
+ (desde CSS nivel 1 a CSS nivel 4). \
+
Color con valores hexadecimal
\ + Por ejemplo: #AABBCC. \
+ Los valores con formato #ABC también funcionan, \
+ el sistema completará el campo automáticamente con el valor #AABBCC. \
+ Este campo puede ser usado sin el carácter #, \
+ de modo que FFF o FFFFFF funcionan sin problemas. \
+
Colores con valores RGB
\ + Por ejemplo: rgb(255,255,255).
\
+ Se puede utilizar la sintáxis abreviada 255,255,255, \
+ que será interpretada como rgb(255,255,255). \
+
\
+ Este es el color del fondo.
\
+ Este campo funciona exactamente como el campo de color de texto.\
+
Puede referirse tanto al color del texto como al color del fondo. Por defecto ese refiere al color del texto.
\ +El color seleccionado será modificado hasta encontrar un color válido. \ + El otro color no cambiará.
+help.algo.title=Dámelo / Los algoritmos +help.algo=“Colores va´lidos y muy cercanos al color inicial”
\ +\ + Este es el algoritmo por defecto. \ + Ofrece opciones de colores muy cercanas al color inicial. \ + (La distancia de color es evaluada de forma matemática, que puede variar del punto de vista de un diseñador.) \ +
\ +\ + Para algunas combinaciones de colores, el algoritmo no ofrece ningún resutado ; \ + en este caso, se recomienda usar el otro algoritmo.\ +
\ +“Un rango de colores válidos”
\ +\ + Este es el algoritmo alternativo, en caso de que el primero no ofrezca ningún resultado. \ + Sin embargo, los colores ofrecidos pueden diferir (significativamente) del color inicial. \ +
+help.ratio.title=Ratio mínimo +################################################################################## +# "help.ratio" will certainly evolve. +# ----> See issue #136 "Text size understanding : comments on pt => px conversion" +# https://github.com/Asqatasun/Contrast-Finder/issues/136 +################################################################################## +help.ratio=Hay tres posibles valores: 3, 4.5 y 7.
\ +¿Cómo escoger un ratio? Dependerá de los siguientes elementos:
\ +- \
+
- Nivel de accesibilidad deseado: AA o AAA. \ +
- Tamaño del texto. \ +
- ¿El texto está en negrita? \ +
Nivel AA
\ +Dos elementos (tamaño y negrita) nos dan cuatro combianciones:
\ +- \
+
- Texto sin negrita + tamaño de texto <
24px: ratio = 4.5 \
+ - Texto sin negrita + tamaño de texto >
24px: ratio = 3 \
+ - Texto con negrita + tamaño de texto <
19px: ratio = 4.5 \
+ - Texto con negrita + tamaño de texto >
19px: ratio = 3 \
+
Nivel AAA
\ +Para el nivel AAA la lógica es la misma, pero el ratio se incrementa de la siguiente manera:
\ +- \
+
- El ratio 4.5 se convierte en 7 \ +
- El ratio 3 se convierte en 4.5 \ +
Entendiendo el tamaño de texto
\ +- \
+
- El criterio de
19pxpuede ser entendido como equivalente \ + a14pto120%o1.2em. \
+ - El criterio de
24pxpuede ser entendido como equivalente \ + a18pto150%o1.5em. \
+
Para una compresión exhaustiva de cómo interpretar el tamaño de texto, se debe leer la \ + definición de texto de gran tamaño de la WCAG.
\ +Todos los detalles sobre el ratio de contraste
\ +- \
+
- WCAG 2.0 criterios de validez 1.4.3 (Nivel AA) \ +
- WCAG 2.0 criterios de validez 1.4.6 (Nivel AAA) \ +
- WCAG 2.0 Glosario - Ratio de Contraste \ +
- WCAG 2.0 - Versión MathML de la definición de luminosidad relativa \ +
Contrast Finder, c’est quoi ?
\ -Contrast-Finder est un outil qui calcule le contraste entre \ +info.about.title=Contrast Finder, c’est quoi ? +info.about=
Contrast-Finder est un outil qui calcule le contraste entre \ deux couleurs (arrière-plan et premier plan) et qui vérifie si il est suffisant. \ Si ce contraste n’est pas valide, l’outil suggère plusieurs propositions \ de couleurs alternatives ayant un contraste correct. \ @@ -78,47 +83,97 @@ home.noResultTxt=
Contrast Finder<
Contrast-Finder est conçu pour être utilisé par les webdesigners, \
les développeurs web ou les professionnels de l’accessibilité web \
afin d’améliorer la lisibilité des pages HTML et des sites web. \
+
+info.feedback.title=Une question ?
+info.feedback= \
+ Si vous avez des questions ou des remarques sur Contrast-Finder, contactez-nous : \
\
-Aide / Comment utiliser cet outil ?
\
- L’interface de Contrast-Finder est un formulaire de cinq champs obligatoires.
\
+ \
+ - Forum Asqatasun
\
+ - Twitter @Contrast_Finder
\
+ - Contrast-Finder sur Github
\
+
+info.contribute.title=Contribuer à Contrast-Finder
+info.contribute= \
+ Toutes les contributions sont chaleureusement accueillies ! \
+ Traduction, correction, rapport de bug, nouvelle fonctionnalité… \
+ N’hésitez pas à jouer avec le \
+ code source \
+ ou à en discuter sur le forum. \
+
+help.title=Aide / Comment utiliser cet outil ?
+help.head= L’interface de Contrast-Finder est un formulaire de cinq champs obligatoires.
\
\
-Premier plan : couleur du texte
\
- \
+
+help.txt-color.title=Premier plan : couleur du texte
+help.txt-color=
\
C’est la couleur du texte. \
- Vous pouvez remplir ce champ avec un nom de couleur CSS, une valeur hexadécimale, \
- ou une valeur RGB. \
+ Vous pouvez remplir ce champ avec un nom de couleur CSS, une valeur hexadécimale, \
+ ou une valeur RGB. \
La valeur saisie est alors prévisualisée à droite du champ. \
\
Couleur par mots-clés
\
Exemple : Black, Silver, YellowGreen, MediumPurple.
\
-Les valeurs autorisées sont les noms des couleurs utilisables en CSS \
+ Les valeurs autorisées sont les noms des couleurs utilisables en CSS \
(du niveau CSS 1 au niveau CSS 4). \
\
Couleur en hexadécimal
\
Exemple : #AABBCC. \
- Notez que #ABC fonctionne également, \
- nous complétons automatiquement le champ avec #AABBCC. \
- Vous pouvez également utiliser ce champ sans le caractère #, \
- ainsi FFF ou FFFFFF fonctionnent parfaitement. \
+ Notez que #ABC fonctionne également, \
+ nous complétons automatiquement le champ avec #AABBCC. \
+ Vous pouvez également utiliser ce champ sans le caractère #, \
+ ainsi FFF ou FFFFFF fonctionnent parfaitement. \
\
Couleur en RGB
\
- Exemple : rgb(255,255,255).
\
- De la même manière, 255,255,255 fonctionne également, \
- nous remplaçons la valeur de ce champ par rgb(255,255,255). \
+
Exemple : rgb(255,255,255).
\
+ De la même manière, 255,255,255 fonctionne également, \
+ nous remplaçons la valeur de ce champ par rgb(255,255,255). \
+
+help.bg-color.title=Arrière-plan : couleur du fond
+help.bg-color= \
+ C’est la couleur d’arrière-plan.
\
+ Ce champ fonctionne comme le champ couleur du texte.\
+
+help.color-to-edit.title=Couleur à modifier
+help.color-to-edit= \
+ Il s’agit de la couleur du texte ou de la couleur du fond. \
+ Par défaut, c’est la couleur du texte.\
+
\
+ \
+ La couleur que vous choisissez sera modifiée jusqu’à ce que l’outil trouve une couleur valide. \
+ L’autre couleur ne changera pas. \
+
+help.algo.title=Propose-moi / Les algorithmes
+help.algo=“Couleurs valides et très proches de la couleur initiale”
\
+ \
+ Ceci est l’algorithme par défaut. \
+ Il propose des couleurs extrêmement proches de la couleur initiale. \
+ (La proximité est calculée sur des critères mathématiques, qui peuvent être différents d’une vision graphique.) \
+
\
+ \
+ L’algorithme dans certains cas ne renvoi aucun résultat ; \
+ dans ce cas, choisissez l’autre algorithme. :) \
\
-Arrière-plan : couleur du fond
\
+“Palette de couleurs valides”
\
\
- C’est la couleur d’arrière-plan.
\
- Ce champ fonctionne comme le champ couleur du texte.\
-
\
-Ratio minimum
\
- Trois valeurs possibles : 3, 4.5 et 7.
\
+ Ceci est l’algorithme “de secours”, au cas où le premier ne donne rien. \
+ En revanche, les couleurs proposées peuvent être plus éloignées, \
+ voire franchement distincte de la couleur initiale. \
+
+help.ratio.title=Ratio minimum
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio= \
+ Trois valeurs possibles : 3, 4.5 et 7. \
+
\
Comment choisir un ratio ? Cela dépend des éléments suivants :
\
\
- Niveau d’accessibilité souhaité : AA ou AAA.
\
@@ -128,10 +183,10 @@ Les valeurs autorisées sont les WCAG 2.0 success criteria 1.4.3 (Level AA)\
- - WCAG 2.0 success criteria 1.4.6 (Level AAA)
\
- WCAG 2.0 Glossary - Contrast Ratio
\
+ - WCAG 2.0 - Contrast (Minimum): success criteria 1.4.3 (Level AA)
\
+ - WCAG 2.0 - Contrast (Minimum): understanding success criteria 1.4.3
\
+ - WCAG 2.0 - Contrast (Enhanced): success criteria 1.4.6 (Level AAA)
\
+ - WCAG 2.0 - Contrast (Enhanced): understanding success criteria 1.4.6
\
- WCAG 2.0 - MathML version of the relative luminance definition
\
- WCAG 2.0 - Defintion of large-scale text
\
\
\
-\
-Couleur à modifier
\
- Il s’agit de la couleur du texte ou de la couleur du fond. Par défaut, c’est la couleur du texte.
\
- La couleur que vous choisissez sera modifiée jusqu’à ce que l’outil trouve une couleur valide. L’autre couleur ne changera pas.
\
-Propose-moi / Les algorithmes
\
-“Couleurs valides et très proches de la couleur initiale”
\
-\
- Ceci est l’algorithme par défaut. \
- Il propose des couleurs extrêmement proches de la couleur initiale. \
- (La proximité est calculée sur des critères mathématiques, qui peuvent être différents d’une vision graphique.) \
-
\
- \
- L’algorithme dans certains cas ne renvoi aucun résultat ; \
- dans ce cas, choisissez l’autre algorithme. :) \
-
\
-“Palette de couleurs valides”
\
- \
- Ceci est l’algorithme “de secours”, au cas où le premier ne donne rien. \
- En revanche, les couleurs proposées peuvent être plus éloignées, \
- voire franchement distincte de la couleur initiale. \
-
\
- Une question ?
\
-Si vous avez des questions ou des remarques sur Contrast-Finder, contactez-nous :
\
-\
- - Forum Asqatasun
\
- - Twitter @Contrast_Finder
\
- - Contrast-Finder sur Github
\
-
\
- Contribuer à Contrast-Finder
\
- Toutes les contributions sont chaleureusement accueillies ! \
- Traduction, correction, rapport de bug, nouvelle fonctionnalité… \
- N’hésitez pas à jouer avec le \
- code source \
- ou à en discuter sur le forum.
+
######### unused i18n entries
# form.results=Resultats
# form.usage=Utilisation :
# form.ratioMedium=Texte petit (Taille < 18px, Niveau AA)
# form.ratioShort=Grand texte (Taille ≥ 18px, Niveau AA)
# form.ratioHigh=Renforcer le contraste (Niveau AAA)
+# form.description_v2=Find me the good contrasts, for web accessibility, between these two colors:
+
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_ko.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_ko.properties
index 3f1150b6..d92bc862 100644
--- a/webapp/src/main/resources/i18n/contrast-finder_utf8_ko.properties
+++ b/webapp/src/main/resources/i18n/contrast-finder_utf8_ko.properties
@@ -8,7 +8,9 @@ home.metaDescription=Contrast-Finder는 웹 접근성 기준(WCAG)에 적합한
Contrast-Finder는 웹디자이너, 웹 개발자 혹은 웹 접근성 전문가가 \
HTML 페이지와 웹사이트의 가독성을 개선하는 데 사용할 수 있도록 디자인되었습니다.
logo.link.title=홈페이지로 되돌아 가기
-nav.language-switch.aria-label=언어
+nav.language=한국어
+nav.language-switching=한국어로 전환
+nav.language-switching.aria-label=언어
result.title.colors=대비 색
result.title.foregroundColor=본문 글자
result.title.backgroundColor=배경
@@ -23,6 +25,9 @@ form.component=교정하려는 색
form.componentForeground=본문 글자 색을 교정
form.componentBackground=배경 색을 교정
form.ratio=최소 비율
+#form.currentRatio=@TODO
+#form.currentRatio.alt.valid=@TODO
+#form.currentRatio.alt.fail=@TODO
form.contrastOld=원래의 색 대비
form.contrastNew=새로운 색 대비
form.validate=기준에 적합한 색 검색하기
@@ -69,25 +74,73 @@ footer.poweredBy=운용 기술:
footer.availableUnder=사용 권한:
footer.link-twitter=트위터에서 Contrast-Finder 팔로우하기
footer.link-git=GitHub에 있는 Contrast-Finder에 기여하기
-home.noResultTxt=Contrast Finder가 무엇인가요?
\
- Contrast-Finder는 두 가지 색(배경 색, 본문 글자 색)의 대비를 계산해서 \
+info.about.title=Contrast Finder가 무엇인가요?
+info.about=
\
+ Contrast-Finder는 두 가지 색(배경 색, 본문 글자 색)의 대비를 계산해서 \
색 대비가 충분한지 알려주는 도구입니다. \
색 대비가 충분하지 않다면, 몇 가지 충분히 대비되는 색의 조합을 제안해 드리는 것이 주요 목적입니다. \
\
Contrast-Finder는 웹디자이너, 웹 개발자 혹은 웹 접근성 전문가가 \
HTML 페이지와 웹사이트의 가독성을 개선하는 데 사용할 수 있도록 디자인되었습니다. \
-
\
-도움말 / 이 도구는 어떻게 사용하나요?
\
- Contrast-Finder 인터페이스 양식에는 다섯 개의 필수 입력 항목이 있습니다.
\
+
+info.feedback.title=사용자 건의
+info.feedback=Contrast-Finder를 사용하시면서 문제가 있거나 다른 문의 사항이 있으시면, 아래에 있는 통로로 연락해주시기 바랍니다:
\
+ \
+ - Asqatasun 포럼
\
+ - 트위터 @Contrast_Finder
\
+ - Contrast-Finder의 Github 저장소
\
+
+info.contribute.title=Contrast-Finder의 기능 개선 및 제안
+info.contribute= \
+ 어떠한 제안이든 모두 환영합니다! \
+ 번역, 문제 수정, 오류 보고, 새로운 기능…
\
+ 부담없이 \
+ 소스 코드를 가지고 놀아보시고, \
+ 포럼에서도 상의해 보세요. \
+
+help.title=도움말 / 이 도구는 어떻게 사용하나요?
+help.head= Contrast-Finder 인터페이스 양식에는 다섯 개의 필수 입력 항목이 있습니다.
\
\
-본문 글자 색
\
+
+help.txt-color.title=
+help.txt-color=
+help.bg-color.title=
+help.bg-color=
+help.color-to-edit.title=교정하려는 색
+help.color-to-edit= \
+ 본문 글자 색 또는 배경색을 선택하실 수 있습니다. 기본은 본문 글자 색.\
+
\
+ 선택하신 색은 나중에 기준에 적합한 색을 찾을 때까지 수정됩니다. \
+ 그리고 나머지 색은 바뀌지 않습니다. \
+
+help.algo.title=검색 범위 / 알고리듬
+help.algo=“처음 지정한 색과 아주 비슷하면서도 기준에 적합한 대비 색”
\
+ \
+ 이것이 기본으로 쓰이는 알고리듬입니다. \
+ 처음 지정한 색과 아주 가까운 색만 골라서 보여줍니다. \
+ (색의 편차는 수학적 방식으로 산출되며, 디자이너의 관점과는 다를 수 있습니다.) \
+
\
\
+ 몇몇 색 조합에 따라선, 알고리듬은 아무런 결과도 추출하지 못할 수 있습니다 ; \
+ 이 경우엔, 다른 알고리듬을 사용해 보십시오. \
+
\
+“확장된 색 범위 속 기준에 적합한 대비 색”
\
+ \
+ 차선책으로 쓰이는 알고리듬으로, 첫 번째 것이 아무런 결과도 보여주지 않을 때 사용합니다. \
+ 하지만, 산출되는 색은 최초 지정 색과 (많이) 다를 수 있습니다. \
+
+help.ratio.title=본문 글자 색
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio= \
본문에 쓰인 글자에 입히는 색입니다. \
이 항목에는 CSS 컬러 키워드, 16진법, 혹은 \
RGB 값을 입력하실 수 있습니다. \
@@ -127,10 +180,10 @@ home.noResultTxt=
Contrast Finder<
레벨 AA
\
두 가지 요소(크기와 볼드 유무)에 따라 다음과 같은 네 가지 조합을 도출할 수 있습니다:
\
\
- - 볼드체가 아닌 글자 + 글자 크기 <
18px: 비율 = 4.5 \
- - 볼드체가 아닌 글자 + 글자 크기 >
18px: 비율 = 3 \
- - 볼드체 글자 + 글자 크기 <
14px: 비율 = 4.5 \
- - 볼드체 글자 + 글자 크기 >
14px: 비율 = 3 \
+ - 볼드체가 아닌 글자 + 글자 크기 <
24px: 비율 = 4.5 \
+ - 볼드체가 아닌 글자 + 글자 크기 >
24px: 비율 = 3 \
+ - 볼드체 글자 + 글자 크기 <
19px: 비율 = 4.5 \
+ - 볼드체 글자 + 글자 크기 >
19px: 비율 = 3 \
\
레벨 AAA
\
레벨 AAA의 원리는 같으나, 비율만 다음과 같이 증가합니다:
\
@@ -140,55 +193,22 @@ home.noResultTxt=Contrast Finder<
\
글자 크기의 이해
\
\
- -
14px 정도의 크기는 14pt 또는 \
+ -
19px 정도의 크기는 14pt 또는 \
120% 혹은 1.2em 크기와 같은 것으로 칩니다. \
- -
18px 정도의 크기는 18pt 또는 \
+ -
24px 정도의 크기는 18pt 또는 \
150% 혹은 1.5em 크기와 같은 것으로 칩니다. \
\
- 글자 크기를 해석하는 방식에 관해서 더 깊고 자세히 알고 싶으시면, \
- WCAG에 기술된 large-scale text의 정의를 읽어보십시오.
\
+ \
+ 글자 크기를 해석하는 방식에 관해서 더 깊고 자세히 알고 싶으시면, \
+ WCAG에 기술된 large-scale text의 정의를 읽어보십시오. \
+
\
대비 비율에 관한 자세한 설명
\
\
- WCAG 2.0 통과 기준 1.4.3 (레벨 AA)
\
- WCAG 2.0 통과 기준 1.4.6 (레벨 AAA)
\
- WCAG 2.0 용어 해설 - 대비 비율
\
- WCAG 2.0 - MathML 버전의 상대 휘도 정의
\
-
\
-교정하려는 색
\
- 본문 글자 색 또는 배경색을 선택하실 수 있습니다. 기본은 본문 글자 색.
\
- 선택하신 색은 나중에 기준에 적합한 색을 찾을 때까지 수정됩니다. \
- 그리고 나머지 색은 바뀌지 않습니다.
\
-검색 범위 / 알고리듬
\
-“처음 지정한 색과 아주 비슷하면서도 기준에 적합한 대비 색”
\
- \
- 이것이 기본으로 쓰이는 알고리듬입니다. \
- 처음 지정한 색과 아주 가까운 색만 골라서 보여줍니다. \
- (색의 편차는 수학적 방식으로 산출되며, 디자이너의 관점과는 다를 수 있습니다.) \
-
\
- \
- 몇몇 색 조합에 따라선, 알고리듬은 아무런 결과도 추출하지 못할 수 있습니다 ; \
- 이 경우엔, 다른 알고리듬을 사용해 보십시오. \
-
\
-“확장된 색 범위 속 기준에 적합한 대비 색”
\
- \
- 차선책으로 쓰이는 알고리듬으로, 첫 번째 것이 아무런 결과도 보여주지 않을 때 사용합니다. \
- 하지만, 산출되는 색은 최초 지정 색과 (많이) 다를 수 있습니다. \
-
\
- 사용자 건의
\
-Contrast-Finder를 사용하시면서 문제가 있거나 다른 문의 사항이 있으시면, 아래에 있는 통로로 연락해주시기 바랍니다:
\
- \
- - Asqatasun 포럼
\
- - 트위터 @Contrast_Finder
\
- - Contrast-Finder의 Github 저장소
\
-
\
- Contrast-Finder의 기능 개선 및 제안
\
- \
- 어떠한 제안이든 모두 환영합니다! \
- 번역, 문제 수정, 오류 보고, 새로운 기능…
\
- 부담없이 \
- 소스 코드를 가지고 놀아보시고, \
- 포럼에서도 상의해 보세요. \
-
+
######### unused i18n entries
# form.results=개의 결과
# form.usage=사용:
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
index 14e2a176..6e0cee14 100644
--- a/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
+++ b/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
@@ -7,7 +7,9 @@ home.metaDescription=Ferramenta on-line para verificar se o contraste das cores
Contrast-Finder oferece esquemas de cores disponíveis perto daquelas que acabaste de testar. \
Acessibilidade dos sítios Web (WCAG).
logo.link.title=Voltar à pàgina inicial
-nav.language-switch.aria-label=línguas
+nav.language=português
+nav.language-switching=em Português
+nav.language-switching.aria-label=línguas
result.title.colors=cores
result.title.foregroundColor=texto
result.title.backgroundColor=fundo
@@ -23,6 +25,9 @@ form.component=Cor a alterar
form.componentForeground=Alterar a cor do texto
form.componentBackground=Alterar a cor de fundo
form.ratio=Rácio minimo
+#form.currentRatio=@TODO
+#form.currentRatio.alt.valid=@TODO
+#form.currentRatio.alt.fail=@TODO
form.contrastOld=Contraste anterior
form.contrastNew=Novo contraste
form.validate=Encontrar cores válidas
@@ -69,20 +74,41 @@ footer.poweredBy=Alimentado por
footer.availableUnder=disponível sob licença
footer.link-twitter=Segue Contrast-Finder no Twitter
footer.link-git=Contribuir para o software Contrast-Finder no GitHub
-home.noResultTxt= Alguma dúvida?
\
- Se tiveres perguntas ou observaçoes sobre Contrast-Finder, contacta-nos :
\
+info.about.title=
+info.about=
+info.feedback.title=Alguma dúvida?
+info.feedback= Se tiveres perguntas ou observaçoes sobre Contrast-Finder, contacta-nos :
\
\
- Contribuir ao Contrast-Finder
\
- Todas as contribuiçoes sao muito bem vindas! \
- Traduçoes, correcçoes, relatorios de erro, nova funcionalidade… \
-
-form.results=@@@TODO Results
-form.usage=@@@TODO Usage:
-form.ratioMedium=@@@TODO Small text (size < 18px, Level AA)
-form.ratioShort=@@@TODO Big text (size ≥ 18px, Level AA)
-form.ratioHigh=@@@TODO Strenghten contrast (Level AAA)
-form.description_v2=@@@TODO Find me the good constrasts, for web accessibility, between these two colors:
+
+info.contribute.title=Contribuir ao Contrast-Finder
+info.contribute= \
+ Todas as contribuiçoes sao muito bem vindas! \
+ Traduçoes, correcçoes, relatorios de erro, nova funcionalidade… \
+
+help.title=
+help.head=
+help.txt-color.title=
+help.txt-color=
+help.bg-color.title=
+help.bg-color=
+help.color-to-edit.title=
+help.color-to-edit=
+help.algo.title=
+help.algo=
+help.ratio.title=
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio=
+######### unused i18n entries ##############################################
+# form.results=Results
+# form.usage=Usage:
+# form.ratioMedium=Small text (size < 18px, Level AA)
+# form.ratioShort=Big text (size ≥ 18px, Level AA)
+# form.ratioHigh=Strengthen contrast (Level AAA)
+# form.description_v2=Find me the good contrasts, for web accessibility, between these two colors:
diff --git a/webapp/src/main/webapp/WEB-INF/pages/form.jsp b/webapp/src/main/webapp/WEB-INF/pages/form.jsp
index 3a9e6b8c..ff478533 100644
--- a/webapp/src/main/webapp/WEB-INF/pages/form.jsp
+++ b/webapp/src/main/webapp/WEB-INF/pages/form.jsp
@@ -149,9 +149,52 @@
<%-- hidden for default page--%>
+
+
+ <%-- https://www.w3.org/TR/wai-aria/#status
+ https://www.w3.org/TR/wai-aria/#marquee
+ http://ideance.net/publications/live-regions/explications.html
+ https://developer.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/
+ aria-live="off" ?
+ aria-live="polite" ?
+ role="status" ?
+ role="marquee" have an implicit aria-live value of off. --%>
+
+
+
+
+
+
+
+ "
+ alt="
-
+
+
+
+
+
+
+
+
+
diff --git a/webapp/src/main/webapp/WEB-INF/template/head.jspf b/webapp/src/main/webapp/WEB-INF/template/head.jspf
index ee05cb83..02820ae7 100644
--- a/webapp/src/main/webapp/WEB-INF/template/head.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/head.jspf
@@ -66,10 +66,21 @@
"@type": "WebApplication",
"name": "Contrast Finder",
"softwareVersion": "${appVersion}",
- "license": "https://github.com/Asqatasun/Contrast-Finder/blob/master/LICENSE",
+ "license": "https://github.com/Asqatasun/Contrast-Finder/blob/master/LICENSE",
"releaseNotes": "https://github.com/Asqatasun/Contrast-Finder/blob/master/CHANGELOG.md",
+ "downloadUrl": "https://github.com/Asqatasun/Contrast-Finder/releases",
"screenshot": "https://contrast-finder.org/public/media/images/screenshot/screenshot.EN_contrast-finder.v0.5.2_2017-07-27_grey_kraken.io-lossy.png",
- "applicationCategory": "BusinessApplication"
+ "applicationCategory": "BusinessApplication",
+ "applicationSubCategory": "WebApplication",
+ "operatingSystem": "any",
+ "availableLanguage": {
+ "@type": "Language",
+ "name": ["English","French","Korean","Portuguese","Spanish"]
+ },
+ "aggregateRating": {
+ "@type": "AggregateRating",
+ "reviewCount": "0"
+ }
}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/WEB-INF/template/header.jspf b/webapp/src/main/webapp/WEB-INF/template/header.jspf
index 56bb5ce5..f6db1646 100644
--- a/webapp/src/main/webapp/WEB-INF/template/header.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/header.jspf
@@ -10,30 +10,42 @@
+
+
@@ -42,11 +54,12 @@
- " role="navigation">
+ " role="navigation">
@@ -56,6 +69,14 @@
- english
+
+
+ - español
+
+
+ - español
+
+
- français
diff --git a/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf b/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
index 164e25b1..19e72107 100644
--- a/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
@@ -2,7 +2,7 @@
<%@ page pageEncoding="UTF-8" %>
<%-- APP version --%>
-
Black, Silver, YellowGreen, MediumPurple. \ -Les valeurs autorisées sont les noms des couleurs utilisables en CSS \ + Les valeurs autorisées sont les noms des couleurs utilisables en CSS \ (du niveau CSS 1 au niveau CSS 4). \
#AABBCC. \
- Notez que #ABC fonctionne également, \
- nous complétons automatiquement le champ avec #AABBCC. \
- Vous pouvez également utiliser ce champ sans le caractère #, \
- ainsi FFF ou FFFFFF fonctionnent parfaitement. \
+ Notez que #ABC fonctionne également, \
+ nous complétons automatiquement le champ avec #AABBCC. \
+ Vous pouvez également utiliser ce champ sans le caractère #, \
+ ainsi FFF ou FFFFFF fonctionnent parfaitement. \
rgb(255,255,255). \ - De la même manière,
255,255,255 fonctionne également, \
- nous remplaçons la valeur de ce champ par rgb(255,255,255). \
+rgb(255,255,255). \ + De la même manière,
255,255,255 fonctionne également, \
+ nous remplaçons la valeur de ce champ par rgb(255,255,255). \
+\ + Ce champ fonctionne comme le champ couleur du texte.\ +
\ - Ce champ fonctionne comme le champ couleur du texte.\ -
\ + 부담없이 \ + 소스 코드를 가지고 놀아보시고, \ + 포럼에서도 상의해 보세요. \ +
레벨 AA
\두 가지 요소(크기와 볼드 유무)에 따라 다음과 같은 네 가지 조합을 도출할 수 있습니다:
\- \
-
- 볼드체가 아닌 글자 + 글자 크기 <
18px: 비율 = 4.5 \
- - 볼드체가 아닌 글자 + 글자 크기 >
18px: 비율 = 3 \
- - 볼드체 글자 + 글자 크기 <
14px: 비율 = 4.5 \
- - 볼드체 글자 + 글자 크기 >
14px: 비율 = 3 \
+ - 볼드체가 아닌 글자 + 글자 크기 <
24px: 비율 = 4.5 \
+ - 볼드체가 아닌 글자 + 글자 크기 >
24px: 비율 = 3 \
+ - 볼드체 글자 + 글자 크기 <
19px: 비율 = 4.5 \
+ - 볼드체 글자 + 글자 크기 >
19px: 비율 = 3 \
레벨 AAA
\레벨 AAA의 원리는 같으나, 비율만 다음과 같이 증가합니다:
\ @@ -140,55 +193,22 @@ home.noResultTxt=Contrast Finder<
\
글자 크기의 이해
\
\
- -
14px 정도의 크기는 14pt 또는 \
+ -
19px 정도의 크기는 14pt 또는 \
120% 혹은 1.2em 크기와 같은 것으로 칩니다. \
- -
18px 정도의 크기는 18pt 또는 \
+ -
24px 정도의 크기는 18pt 또는 \
150% 혹은 1.5em 크기와 같은 것으로 칩니다. \
\
- 글자 크기를 해석하는 방식에 관해서 더 깊고 자세히 알고 싶으시면, \
- WCAG에 기술된 large-scale text의 정의를 읽어보십시오.
\
+ \
+ 글자 크기를 해석하는 방식에 관해서 더 깊고 자세히 알고 싶으시면, \
+ WCAG에 기술된 large-scale text의 정의를 읽어보십시오. \
+
\
대비 비율에 관한 자세한 설명
\
\
- WCAG 2.0 통과 기준 1.4.3 (레벨 AA)
\
- WCAG 2.0 통과 기준 1.4.6 (레벨 AAA)
\
- WCAG 2.0 용어 해설 - 대비 비율
\
- WCAG 2.0 - MathML 버전의 상대 휘도 정의
\
-
\
-교정하려는 색
\
- 본문 글자 색 또는 배경색을 선택하실 수 있습니다. 기본은 본문 글자 색.
\
- 선택하신 색은 나중에 기준에 적합한 색을 찾을 때까지 수정됩니다. \
- 그리고 나머지 색은 바뀌지 않습니다.
\
-검색 범위 / 알고리듬
\
-“처음 지정한 색과 아주 비슷하면서도 기준에 적합한 대비 색”
\
- \
- 이것이 기본으로 쓰이는 알고리듬입니다. \
- 처음 지정한 색과 아주 가까운 색만 골라서 보여줍니다. \
- (색의 편차는 수학적 방식으로 산출되며, 디자이너의 관점과는 다를 수 있습니다.) \
-
\
- \
- 몇몇 색 조합에 따라선, 알고리듬은 아무런 결과도 추출하지 못할 수 있습니다 ; \
- 이 경우엔, 다른 알고리듬을 사용해 보십시오. \
-
\
-“확장된 색 범위 속 기준에 적합한 대비 색”
\
- \
- 차선책으로 쓰이는 알고리듬으로, 첫 번째 것이 아무런 결과도 보여주지 않을 때 사용합니다. \
- 하지만, 산출되는 색은 최초 지정 색과 (많이) 다를 수 있습니다. \
-
\
- 사용자 건의
\
-Contrast-Finder를 사용하시면서 문제가 있거나 다른 문의 사항이 있으시면, 아래에 있는 통로로 연락해주시기 바랍니다:
\
- \
- - Asqatasun 포럼
\
- - 트위터 @Contrast_Finder
\
- - Contrast-Finder의 Github 저장소
\
-
\
- Contrast-Finder의 기능 개선 및 제안
\
- \
- 어떠한 제안이든 모두 환영합니다! \
- 번역, 문제 수정, 오류 보고, 새로운 기능…
\
- 부담없이 \
- 소스 코드를 가지고 놀아보시고, \
- 포럼에서도 상의해 보세요. \
-
+
######### unused i18n entries
# form.results=개의 결과
# form.usage=사용:
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
index 14e2a176..6e0cee14 100644
--- a/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
+++ b/webapp/src/main/resources/i18n/contrast-finder_utf8_pt.properties
@@ -7,7 +7,9 @@ home.metaDescription=Ferramenta on-line para verificar se o contraste das cores
Contrast-Finder oferece esquemas de cores disponíveis perto daquelas que acabaste de testar. \
Acessibilidade dos sítios Web (WCAG).
logo.link.title=Voltar à pàgina inicial
-nav.language-switch.aria-label=línguas
+nav.language=português
+nav.language-switching=em Português
+nav.language-switching.aria-label=línguas
result.title.colors=cores
result.title.foregroundColor=texto
result.title.backgroundColor=fundo
@@ -23,6 +25,9 @@ form.component=Cor a alterar
form.componentForeground=Alterar a cor do texto
form.componentBackground=Alterar a cor de fundo
form.ratio=Rácio minimo
+#form.currentRatio=@TODO
+#form.currentRatio.alt.valid=@TODO
+#form.currentRatio.alt.fail=@TODO
form.contrastOld=Contraste anterior
form.contrastNew=Novo contraste
form.validate=Encontrar cores válidas
@@ -69,20 +74,41 @@ footer.poweredBy=Alimentado por
footer.availableUnder=disponível sob licença
footer.link-twitter=Segue Contrast-Finder no Twitter
footer.link-git=Contribuir para o software Contrast-Finder no GitHub
-home.noResultTxt= Alguma dúvida?
\
- Se tiveres perguntas ou observaçoes sobre Contrast-Finder, contacta-nos :
\
+info.about.title=
+info.about=
+info.feedback.title=Alguma dúvida?
+info.feedback= Se tiveres perguntas ou observaçoes sobre Contrast-Finder, contacta-nos :
\
\
- Contribuir ao Contrast-Finder
\
- Todas as contribuiçoes sao muito bem vindas! \
- Traduçoes, correcçoes, relatorios de erro, nova funcionalidade… \
-
-form.results=@@@TODO Results
-form.usage=@@@TODO Usage:
-form.ratioMedium=@@@TODO Small text (size < 18px, Level AA)
-form.ratioShort=@@@TODO Big text (size ≥ 18px, Level AA)
-form.ratioHigh=@@@TODO Strenghten contrast (Level AAA)
-form.description_v2=@@@TODO Find me the good constrasts, for web accessibility, between these two colors:
+
+info.contribute.title=Contribuir ao Contrast-Finder
+info.contribute= \
+ Todas as contribuiçoes sao muito bem vindas! \
+ Traduçoes, correcçoes, relatorios de erro, nova funcionalidade… \
+
+help.title=
+help.head=
+help.txt-color.title=
+help.txt-color=
+help.bg-color.title=
+help.bg-color=
+help.color-to-edit.title=
+help.color-to-edit=
+help.algo.title=
+help.algo=
+help.ratio.title=
+##################################################################################
+# "help.ratio" will certainly evolve.
+# ----> See issue #136 "Text size understanding : comments on pt => px conversion"
+# https://github.com/Asqatasun/Contrast-Finder/issues/136
+##################################################################################
+help.ratio=
+######### unused i18n entries ##############################################
+# form.results=Results
+# form.usage=Usage:
+# form.ratioMedium=Small text (size < 18px, Level AA)
+# form.ratioShort=Big text (size ≥ 18px, Level AA)
+# form.ratioHigh=Strengthen contrast (Level AAA)
+# form.description_v2=Find me the good contrasts, for web accessibility, between these two colors:
diff --git a/webapp/src/main/webapp/WEB-INF/pages/form.jsp b/webapp/src/main/webapp/WEB-INF/pages/form.jsp
index 3a9e6b8c..ff478533 100644
--- a/webapp/src/main/webapp/WEB-INF/pages/form.jsp
+++ b/webapp/src/main/webapp/WEB-INF/pages/form.jsp
@@ -149,9 +149,52 @@
<%-- hidden for default page--%>
+
+
+ <%-- https://www.w3.org/TR/wai-aria/#status
+ https://www.w3.org/TR/wai-aria/#marquee
+ http://ideance.net/publications/live-regions/explications.html
+ https://developer.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/
+ aria-live="off" ?
+ aria-live="polite" ?
+ role="status" ?
+ role="marquee" have an implicit aria-live value of off. --%>
+
+
+
+
+
+
+
+ "
+ alt="
-
+
+
+
+
+
+
+
+
+
diff --git a/webapp/src/main/webapp/WEB-INF/template/head.jspf b/webapp/src/main/webapp/WEB-INF/template/head.jspf
index ee05cb83..02820ae7 100644
--- a/webapp/src/main/webapp/WEB-INF/template/head.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/head.jspf
@@ -66,10 +66,21 @@
"@type": "WebApplication",
"name": "Contrast Finder",
"softwareVersion": "${appVersion}",
- "license": "https://github.com/Asqatasun/Contrast-Finder/blob/master/LICENSE",
+ "license": "https://github.com/Asqatasun/Contrast-Finder/blob/master/LICENSE",
"releaseNotes": "https://github.com/Asqatasun/Contrast-Finder/blob/master/CHANGELOG.md",
+ "downloadUrl": "https://github.com/Asqatasun/Contrast-Finder/releases",
"screenshot": "https://contrast-finder.org/public/media/images/screenshot/screenshot.EN_contrast-finder.v0.5.2_2017-07-27_grey_kraken.io-lossy.png",
- "applicationCategory": "BusinessApplication"
+ "applicationCategory": "BusinessApplication",
+ "applicationSubCategory": "WebApplication",
+ "operatingSystem": "any",
+ "availableLanguage": {
+ "@type": "Language",
+ "name": ["English","French","Korean","Portuguese","Spanish"]
+ },
+ "aggregateRating": {
+ "@type": "AggregateRating",
+ "reviewCount": "0"
+ }
}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/WEB-INF/template/header.jspf b/webapp/src/main/webapp/WEB-INF/template/header.jspf
index 56bb5ce5..f6db1646 100644
--- a/webapp/src/main/webapp/WEB-INF/template/header.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/header.jspf
@@ -10,30 +10,42 @@
+
+
@@ -42,11 +54,12 @@
- " role="navigation">
+ " role="navigation">
@@ -56,6 +69,14 @@
- english
+
+
+ - español
+
+
+ - español
+
+
- français
diff --git a/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf b/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
index 164e25b1..19e72107 100644
--- a/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
+++ b/webapp/src/main/webapp/WEB-INF/template/template_variables.jspf
@@ -2,7 +2,7 @@
<%@ page pageEncoding="UTF-8" %>
<%-- APP version --%>
-
14px 정도의 크기는 14pt 또는 \
+ 19px 정도의 크기는 14pt 또는 \
120% 혹은 1.2em 크기와 같은 것으로 칩니다. 18px 정도의 크기는 18pt 또는 \
+ 24px 정도의 크기는 18pt 또는 \
150% 혹은 1.5em 크기와 같은 것으로 칩니다. \ - 부담없이 \ - 소스 코드를 가지고 놀아보시고, \ - 포럼에서도 상의해 보세요. \ -