Merge branch 'feat/color-contrast' into chore/all-my-stuffs

Author: sharevb

components.d.ts

@@ -66,6 +66,7 @@ declare module '@vue/runtime-core' {
     CodeHighlighter: typeof import('./src/tools/code-highlighter/code-highlighter.vue')['default']
     CoinFlipper: typeof import('./src/tools/coin-flipper/coin-flipper.vue')['default']
     CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
+    ColorContrastChecker: typeof import('./src/tools/color-contrast-checker/color-contrast-checker.vue')['default']
     ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
     ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
     ColorWheel: typeof import('./src/tools/color-wheel/color-wheel.vue')['default']
@@ -261,6 +262,7 @@ declare module '@vue/runtime-core' {
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']

package.json

@@ -261,6 +261,7 @@
     "vue3-fortune-wheel": "^2.0.5",
     "vuedraggable": "^4.1.0",
     "w-websocket-client": "^1.0.29",
+    "wcag-contrast-utils": "^1.0.1",
     "webcrack": "^2.15.0",
     "webp-converter-browser": "^1.0.4",
     "xml-formatter": "^3.6.4",

pnpm-lock.yaml

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { contrastRatio, passesWCAG } from 'wcag-contrast-utils';
+import { useQueryParam } from '@/composable/queryParams';
+
+const forecolor = useQueryParam({ name: 'fg', defaultValue: '#000' });
+const backcolor = useQueryParam({ name: 'bg', defaultValue: '#fff' });
+
+const result = computed(() => {
+  try {
+    const constrastValue = contrastRatio(forecolor.value, backcolor.value);
+    const wcagLevel = passesWCAG(constrastValue);
+
+    return {
+      constrastValue,
+      wcagLevel,
+      error: '',
+    };
+  }
+  catch (e: any) {
+    return {
+      constrastValue: -1,
+      wcagLevel: '',
+      error: e.toString(),
+    };
+  }
+});
+</script>
+
+<template>
+  <div max-w-600px>
+    <n-form-item
+      label="Forecolor:"
+      label-placement="left"
+      mb-1
+    >
+      <n-color-picker
+        v-model:value="forecolor"
+        :modes="['hex']"
+        :show-alpha="false"
+      />
+    </n-form-item>
+    <n-form-item
+      label="Backcolor:"
+      label-placement="left"
+      mb-1
+    >
+      <n-color-picker
+        v-model:value="backcolor"
+        :modes="['hex']"
+        :show-alpha="false"
+      />
+    </n-form-item>
+
+    <n-divider />
+
+    <c-alert v-if="result.error">
+      {{ result.error }}
+    </c-alert>
+
+    <input-copyable v-if="!result.error" readonly label="Constrast:" label-width="100px" label-position="left" :value="result.constrastValue" mb-2 />
+    <input-copyable v-if="!result.error" readonly label="Level:" label-width="100px" label-position="left" :value="result.wcagLevel" />
+  </div>
+</template>

src/tools/color-contrast-checker/color-contrast-checker.vue

@@ -0,0 +1,13 @@
+import { ColorSwatch } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Color Contrast Checker',
+  path: '/color-contrast-checker',
+  description: 'Check the WCAG constrast level between two colors',
+  keywords: ['color', 'contrast', 'checker', 'wcag'],
+  component: () => import('./color-contrast-checker.vue'),
+  icon: ColorSwatch,
+  createdAt: new Date('2025-03-09'),
+  category: 'Web',
+});