diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/contrast_ratio/contrast_ratio.vue | 28 | ||||
| -rw-r--r-- | src/i18n/en.json | 14 |
2 files changed, 35 insertions, 7 deletions
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index 9a93dcd0..f4f9ea86 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -1,6 +1,6 @@ <template> <span v-if="contrast" class="contrast-ratio"> - <span :title="`Contrast is ${contrast.text}`" class="rating"> + <span :title="hint" class="rating"> <span v-if="contrast.aaa"> <i class="icon-thumbs-up-alt"/> </span> @@ -11,14 +11,14 @@ <i class="icon-attention"/> </span> </span> - <span class="rating" v-if="contrast && large" :title="`Contrast is ${contrast.text} (18pt+)`"> - <span v-if="contrast.aaa"> + <span class="rating" v-if="contrast && large" :title="hint_18pt"> + <span v-if="contrast.laaa"> <i class="icon-thumbs-up-alt"/> </span> - <span v-if="!contrast.aaa && contrast.aa"> + <span v-if="!contrast.laaa && contrast.laa"> <i class="icon-adjust"/> </span> - <span v-if="!contrast.aaa && !contrast.aa"> + <span v-if="!contrast.laaa && !contrast.laa"> <i class="icon-attention"/> </span> </span> @@ -29,7 +29,23 @@ export default { props: [ 'large', 'contrast' - ] + ], + computed: { + hint () { + const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad') + const level = this.$t(`settings.style.common.contrast.level.${levelVal}`) + const context = this.$t('settings.style.common.contrast.context.text') + const ratio = this.contrast.text + return this.$t('settings.style.common.contrast.hint', { level, context, ratio }) + }, + hint_18pt () { + const levelVal = this.contrast.laaa ? 'aaa' : (this.contrast.laa ? 'aa' : 'bad') + const level = this.$t(`settings.style.common.contrast.level.${levelVal}`) + const context = this.$t('settings.style.common.contrast.context.18pt') + const ratio = this.contrast.text + return this.$t('settings.style.common.contrast.hint', { level, context, ratio }) + } + } } </script> diff --git a/src/i18n/en.json b/src/i18n/en.json index 04e9977b..18b47ba7 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -165,7 +165,19 @@ "style": { "common": { "color": "Color", - "opacity": "Opacity" + "opacity": "Opacity", + "contrast": { + "hint": "Contrast ratio is {ratio}, it {level} {context}", + "level": { + "aa": "meets Level AA guideline (minimal)", + "aaa": "meets Level AAA guideline (recommended)", + "bad": "doesn't meet any accessibility guidelines" + }, + "context": { + "18pt": "for large (18pt+) text", + "text": "for text" + } + } }, "basic_colors": { "_tab_label": "Basic", |