misund · misund · Oct 10, 2025 · Oct 10, 2025
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.github/workflows/yarn-test.yml b/.github/workflows/yarn-test.yml
@@ -22,7 +22,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "yarn"
+          cache: 'yarn'
 
       - name: Install dependencies
         run: yarn install

diff --git a/.mocharc.json b/.mocharc.json
@@ -0,0 +1,4 @@
+{
+  "spec": "test/**/*.ts",
+  "node-option": ["import=tsx"]
+}
diff --git a/.travis.yml b/.travis.yml
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,35 @@
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+import tsPlugin from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  js.configs.recommended,
+  ...compat.extends('airbnb/base', 'prettier'),
+  {
+    files: ['src/**/*.ts', 'test/**/*.ts'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+    },
+    rules: {
+      ...tsPlugin.configs.recommended.rules,
+    },
+  },
+]
diff --git a/package.json b/package.json
@@ -2,15 +2,27 @@
   "name": "get-best-contrast-color",
   "version": "0.3.1",
   "description": "Calculate the color in an array of colors that gives the highest contrast to another color.",
+  "type": "module",
   "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js"
+    }
+  },
+  "files": [
+    "build"
+  ],
   "scripts": {
-    "build": "babel src -d build",
-    "lint": "eslint --max-warnings=0 src",
-    "mocha": "mocha --require @babel/register",
-    "postpublish": "git push --tags",
-    "prepublish": "yarn build && yarn test",
-    "release": "np",
-    "test": "yarn lint && yarn mocha"
+    "build": "tsc",
+    "lint": "eslint --max-warnings=0 src/**/*.ts",
+    "mocha": "mocha",
+    "test": "yarn lint && yarn mocha",
+    "prepare": "yarn build",
+    "prepublishOnly": "yarn test",
+    "preversion": "yarn test",
+    "release": "np"
   },
   "repository": {
     "type": "git",
@@ -33,19 +45,22 @@
   },
   "homepage": "https://github.com/misund/get-best-contrast-color#readme",
   "devDependencies": {
-    "@babel/cli": "7.7.0",
-    "@babel/core": "7.7.2",
-    "@babel/preset-env": "7.7.1",
-    "@babel/register": "7.7.0",
-    "eslint": "6.6.0",
-    "eslint-config-airbnb": "17.1.1",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.16.0",
-    "mocha": "6.2.2",
-    "np": "5.1.3"
+    "@eslint/eslintrc": "3.3.1",
+    "@eslint/js": "9.32.0",
+    "@types/mocha": "10.0.10",
+    "@types/node": "22.10.5",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "eslint": "9.32.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import": "2.32.0",
+    "mocha": "11.7.1",
+    "np": "10.2.0",
+    "tsx": "4.19.2",
+    "typescript": "5.9.2"
   },
   "dependencies": {
-    "get-contrast-ratio": "0.2.1"
+    "get-contrast-ratio": "1.0.0-1"
   }
 }
diff --git a/src/index.js b/src/index.js
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,15 @@
+import getContrastRatio from 'get-contrast-ratio'
+
+/**
+ * Calculate which color in an array of colors gives the highest contrast to another color.
+ *
+ * @param background A string that can be parsed as a CSS color
+ * @param colors An array of strings that can be parsed to CSS colors
+ * @return The color from colors that has the highest contrast to background
+ */
+const getBestContrastColor = (background: string, colors: string[] = []): string =>
+  colors.reduce((acc, color) =>
+    getContrastRatio(background, color) > getContrastRatio(background, acc) ? color : acc,
+  )
+
+export default getBestContrastColor
diff --git a/test/build.test.ts b/test/build.test.ts
@@ -0,0 +1,14 @@
+/* global describe, it */
+import assert from 'assert'
+import getBestContrastColor from '../build/index.js'
+
+describe('Built output', () => {
+  it('should export a working ESM module', () => {
+    assert.strictEqual(typeof getBestContrastColor, 'function')
+  })
+
+  it('should calculate best contrast correctly from built output', () => {
+    assert.strictEqual(getBestContrastColor('white', ['black', 'white']), 'black')
+    assert.strictEqual(getBestContrastColor('black', ['black', 'white']), 'white')
+  })
+})
diff --git a/test/test.js b/test/test.js
diff --git a/test/test.ts b/test/test.ts
@@ -0,0 +1,37 @@
+/* global describe, it */
+import assert from 'assert'
+import bestContrast from '../src/index.js'
+
+describe('Get best contrast color', () => {
+  describe('Black on white', () =>
+    it('should yield black over white on white', () => {
+      assert.equal(bestContrast('white', ['black', 'white']), 'black')
+    }))
+  describe('Black on gray', () =>
+    it('should yield black over white on gray', () => {
+      assert.equal(bestContrast('gray', ['black', 'white']), 'black')
+    }))
+  describe('White on darkgray', () =>
+    it('should yield white over pink on darkgray', () => {
+      assert.equal(bestContrast('darkgray', ['pink', 'white']), 'white')
+    }))
+  describe('White on black', () =>
+    it('should yield white over black on black', () => {
+      assert.equal(bestContrast('hsl(0, 0%, 0%)', ['black', 'white']), 'white')
+    }))
+  describe('White on saddlebrown', () =>
+    it('should yield white over black on saddlebrown', () => {
+      assert.equal(bestContrast('saddlebrown', ['black', 'white']), 'white')
+    }))
+  describe('Black on palevioletred', () =>
+    it('should yield black over white on palevioletred', () => {
+      assert.equal(bestContrast('palevioletred', ['black', 'white']), 'black')
+    }))
+  describe('Darkslateblue on papayawhip', () =>
+    it('should yield darkslateblue over green and yellow on papayawhip', () => {
+      assert.equal(
+        bestContrast('papayawhip', ['#00ff00', 'darkslateblue', 'yellow']),
+        'darkslateblue',
+      )
+    }))
+})
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "./build",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "test"]
+}